vue.config.js 中的新配置解析：构建优化与项目自定义

前端

2024-01-22 01:22:18

Vue.config.js 的发展历程

在早期的 Vue CLI 中，我们使用 webpack.config.js 文件来管理项目的构建配置。然而，随着 Vue CLI 的不断发展和完善，webpack.config.js 被废弃，取而代之的是 vue.config.js。

vue.config.js 是一个 JavaScript 文件，它允许您配置 Vue CLI 的构建过程。通过修改这个文件，您可以定制项目的构建行为、配置 webpack 的选项、使用插件等。

在 Vue CLI 3 中，vue.config.js 文件默认会被创建在项目根目录下。如果您的项目中没有这个文件，您可以手动创建一个。

vue.config.js 中的新配置

在最新的 Vue CLI 版本中，vue.config.js 中新增了一些配置选项，它们可以帮助您进一步优化项目性能和自定义项目行为。

1. 生产环境构建优化

在 productionSourceMap 选项中，您可以指定是否在生产环境中生成 source map。默认情况下，这个选项是关闭的，因为 source map 会增加构建后的代码体积，并且可能会泄露一些敏感信息。

如果您需要在生产环境中使用 source map，可以将这个选项设置为 true。但是，请注意，这可能会减慢构建速度并增加构建后的代码体积。

2. 自定义 webpack 配置

在 configureWebpack 选项中，您可以传入一个函数，该函数将接收 webpack 的配置对象作为参数。通过这个函数，您可以自定义 webpack 的配置，例如修改 loader 的顺序、添加额外的插件等。

module.exports = {
  configureWebpack: {
    // 修改 loader 的顺序
    module: {
      rules: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          options: {
            // ...
          }
        },
        {
          test: /\.css$/,
          loader: 'css-loader',
          options: {
            // ...
          }
        }
      ]
    },
    // 添加额外的插件
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ]
  }
}

3. 自定义项目行为

在 chainWebpack 选项中，您可以传入一个函数，该函数将接收 webpack-chain 的实例作为参数。通过这个函数，您可以自定义 webpack 的配置，而且可以以一种更链式的方式进行操作。

module.exports = {
  chainWebpack: (config) => {
    // 修改 loader 的顺序
    config.module
      .rule('js')
      .test(/\.js$/)
      .use('babel-loader')
      .loader('babel-loader')
      .options({
        // ...
      })
      .end()
      .rule('css')
      .test(/\.css$/)
      .use('css-loader')
      .loader('css-loader')
      .options({
        // ...
      })
      .end()

    // 添加额外的插件
    config.plugin('provide').use(webpack.ProvidePlugin, [
      {
        $: 'jquery',
        jQuery: 'jquery'
      }
    ])
  }
}