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

【攻略】详解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文件的基本结构以及常用配置有了理解，并可根据实际需求对此文件进行修改。