详解vue-cli脚手架build目录中的dev-server.js配置文件

【攻略】详解vue-cli脚手架build目录中的dev-server.js配置文件

在Vue.js的项目中,build目录中的dev-server.js文件负责创建一个开发服务器,来帮助我们优化开发阶段的开发体验。该文件中包含了很多重要的配置项,接下来我们将详细讲解这些配置项。

dev-server.js文件的基本结构

首先,我们来看一下dev-server.js文件的基本结构:

const webpack = require('webpack')
const merge = require('webpack-merge')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const baseWebpackConfig = require('./webpack.base.conf')
const utils = require('./utils')
const config = require('../config')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
  mode: 'development',
  devtool: config.dev.devtool,
  devServer: {
    clientLogLevel: 'warning',
    // ...
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    // ...
  ]
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      process.env.PORT = port
      devWebpackConfig.devServer.port = port

      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        // ...
      }))

      resolve(devWebpackConfig)
    }
  })
})

从代码中可以看到,该文件中引入了许多node模块和其他文件的模块,接下来我们将对这些引入的模块和配置对象进行详解。

引入的模块

  1. webpack: webpack是一个现代JavaScript应用程序的静态模块打包器。
  2. webpack-merge: 合并wp配置的一个工具。建议先了解 require('./webpack.base.conf') 及下文中的merge。
  3. FriendlyErrorsPlugin: 乐于助人的报错信息展示插件,能以更清晰的形式描述webpack编译时出错的位置的详细信息。

config.dev.*

在config目录中我们可以看到一个dev.env.js和dev.js文件,这两个文件会在dev-server.js文件中被引用,其作用如下:

  • config.dev.env: 开发环境中使用的配置项,如开发环境中运行的地址baseUrl、node环境等。
  • config.dev: 开发环境的webpack配置项,如启动的服务器端口号port等。

devServer配置

除了引入的模块和config.dev.之外,该文件的主要配置是在devWebpackConfig对象下进行的。

而devWebpackConfig下最主要的配置就是devServer:

devServer: {
  clientLogLevel: 'warning', // 告诉服务器记录级别
  ...
}

devServer的常用配置项

  • contentBase: 告诉服务器从哪里提供内容,默认情况下是从项目根目录提供内容。
  • host: 指定使用一个 host。默认是 localhost。如果你希望服务器外部可访问,指定如下:0.0.0.0
  • port: 端口号。
  • proxy: 配置代理跨域。
  • compress: 一切服务都启用gzip 压缩。
  • historyApiFallback: 任意的 404 响应可以提供为 index.html 页面的内容。用来解决vue-router在history模式下刷新页面会报404的问题。
  • hot: 启用 webpack 的模块热替换特性。
  • https: 启用 https。
  • noInfo: 关闭所有打印到控制台的无用信息。
  • overlay: 在浏览器中显示编译时的错误信息。
  • publicPath: 访问资源加前缀。
  • quiet: 如果你不想让 dev server 向控制台输出任何内容,选项可以开启。
  • watchOptions: 监控文件改动时候,delay多久重新打包,不会每按一个键都联网请求数据,可以提高性能。

最佳实践

在实际开发中,我们可能还要对devServer进行其他的配置。以下是两个常用的示例:

1. webpack-dev-server启用Gzip压缩

devServer: {
  after(app, server) {
    app.use(
      require('compression')({
        algorithm: 'gzip',
        threshold: 10240,
        minRatio: 0.8
      })
    )
  }
}

这里我们使用了compression模块来启用Gzip压缩,其中的参数说明如下:

  • algorithm: 设置压缩算法
  • threshold: 只有大小大于该值的资源会被处理
  • minRatio: 只有压缩率小于这个值的资源才会被处理

2. 解决在热更新下vue-router刷新页面会出现404错误的问题

在启用热更新(hot)时,会出现vue-router中hash模式下,路由正常跳转,但刷新页面会出现404错误的问题。这是因为热更新被加入进来后,对于路由的跳转是不触发整个页面的重新渲染的,所以在刷新页面时,浏览器会请求当前路径下的index.html文件,但此文件不存在,所以出现404错误。

解决这个问题的方法是在devServer的historyApiFallback选项中将rewrites配置为空:

devServer: {
  historyApiFallback: {
    rewrites: [
      {
        from: /.*/,
        to: path.posix.join(config.dev.assetsPublicPath, 'index.html'),
      },
    ],
  },
},

在配置文件中加入这一行配置后,热更新下的vue-router引用本地文件完成,刷新页面时也不会出现404错误。

总结

以上就是对vue-cli脚手架build目录中的dev-server.js配置文件进行的详细讲解。在实际项目中,配置项会因项目而异,但是对于一些常用的配置,我们需要熟练掌握。通过学习此文,相信读者已经对于dev-server.js文件的基本结构以及常用配置有了理解,并可根据实际需求对此文件进行修改。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解vue-cli脚手架build目录中的dev-server.js配置文件 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • javascript cookie的基本操作(添加和删除)

    Javascript Cookie 的基本操作 添加 Cookie 以下是添加Cookie的步骤: 创建一个 Date 对象用于设置 Cookie 过期时间。 将 Cookie 信息存储到一个变量中,变量必须是一个字符串。 使用 document.cookie 将 Cookie 写入浏览器的 Cookie 中。 以下是一个简单的示例,设置一个名为 usern…

    JavaScript 2023年6月11日
    00
  • JavaScript中的方法重载实例

    下面是关于JavaScript中的方法重载实例的完整攻略。 什么是方法重载 方法重载指的是在同一个作用域下,为一个函数定义多个参数列表的函数,这些函数被称为重载函数。当函数被调用时,会根据传入的参数类型和数量的不同,自动选择执行对应的重载函数。在JavaScript中,由于没有类型声明,方法重载需要借助函数内部的判断逻辑来实现。 实现方法重载 实现方法重载的…

    JavaScript 2023年6月11日
    00
  • 详解JS ES6编码规范

    详解JS ES6编码规范 ES6是JavaScript的一种新版本,提供了许多新的语言特性和功能。在编写JavaScript代码时,请遵循以下编码规范,以提高代码的质量和可读性。 代码风格和排版 使用缩进 使用两个空格进行缩进,而不是使用制表符或四个空格。这样可以确保代码在不同的编辑器或IDE中具有相同的外观。 使用括号 在if语句、循环和函数声明等结构中,…

    JavaScript 2023年5月20日
    00
  • JavaScript实现手写原生任务定时器

    下面是详细讲解“JavaScript实现手写原生任务定时器”的完整攻略: 1. 什么是任务定时器 任务定时器指的是可以在指定时间间隔内重复执行某个函数或者只执行一次某个函数的机制。JavaScript原生的任务定时器包括setInterval和setTimeout两个函数,它们都可以通过回调函数托管一个任务到任务队列中,等待JavaScript引擎空闲后执行…

    JavaScript 2023年6月11日
    00
  • 原生JS实现循环Nodelist Dom列表的4种方式示例

    原生JS实现循环Nodelist Dom列表的4种方式示例的完整攻略如下: 1. 使用for循环遍历Nodelist 可以使用常规的for循环来遍历Nodelist。要遍历Nodelist的所有项,需要使用nodelist.length属性,并使用nodelist.item(index)方法来访问单个元素。 const nodeList = document…

    JavaScript 2023年6月10日
    00
  • 详解JS截取字符串的三个方法substring,substr,slice

    substring() 方法 substring() 方法用于提取字符串中两个指定索引之间的字符。语法如下: stringObject.substring(start, stop) 参数 start:必选,正整数,规定要提取的子串的第一个字符在 stringObject 中的位置。必须是数值,如果不是,会自动转换为数字。 参数 stop:可选,正整数,且必须…

    JavaScript 2023年5月28日
    00
  • 浅谈String.valueOf()方法的使用

    当我们需要将其他类型的数据转换为字符串时,就会用到Java中的valueOf()方法。String类提供了一个静态的valueOf()方法,可以接受多种类型的参数,并将其转换为字符串类型。本文将详细讲解String类的valueOf()方法的使用方法。 String.valueOf()方法的语法 String类的valueOf()方法具有以下语法: publ…

    JavaScript 2023年6月10日
    00
  • jquery请求servlet实现ajax异步请求的示例

    下面我将为您提供详细讲解“jquery请求servlet实现ajax异步请求的示例”的完整攻略。 1. 准备工作 在开始之前,我们需要先完成以下几个准备工作: 确认您已经具备一定的 Java 和 jQuery 技能。 确认您已经安装了 Java 开发环境和一个 Web 服务器,例如 Tomcat。 确认您的 Web 服务器已经正常运行。 准备一个普通的 HT…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部