Vue.js 中 vue-cli3 升级后的 vue.config.js 文件配置方法

随着 Vue.js 的不断发展，vue-cli3 已经成为了前端开发中最常用的脚手架工具之一。而在 vue-cli3 中，vue.config.js 文件被用来配置项目的各种选项，如 webpack 配置、代理、构建输出等。本文将详细介绍 vue-cli3 中 vue.config.js 文件的配置方法，以及如何通过配置文件来优化项目。

1. vue.config.js 文件的基本结构

在 vue-cli3 中，vue.config.js 文件的基本结构如下：

module.exports = {
  // 选项...
}

其中，module.exports 是 Node.js 中用于导出模块的语法，表示将一个对象导出为模块。在 vue.config.js 文件中，我们可以通过这个对象来配置项目的各种选项。

2. 常用的配置选项

2.1 webpack 配置

在 vue.config.js 文件中，我们可以通过 chainWebpack 和 configureWebpack 选项来修改 webpack 配置。其中，chainWebpack 用于对 webpack 配置进行更加细粒度的修改，而 configureWebpack 则用于对 webpack 配置进行更加粗粒度的修改。下面是一个修改 webpack 配置的示例：

-- -------------------- ---- -------
-------------- - -
  ------------- ------ -- -
    -- -- ------------- ----
    ------ - -------------------------------------- -
      -- -- ------- --
      ------- -
        ------ -
          -
            ----- ---------
            ---- ------------
          -
        -
      -
    --
  --
  ----------------- -
    -- -- ------- --
    ------- -
      ------ -
        -
          ----- ---------
          ---- ------------
        -
      -
    -
  -
-

2.2 代理设置

在开发过程中，我们经常需要通过代理来解决跨域问题。在 vue.config.js 文件中，我们可以通过 devServer.proxy 选项来配置代理。下面是一个配置代理的示例：

-- -------------------- ---- -------
-------------- - -
  ---------- -
    ------ -
      ------- -
        ------- ------------------------
        ------------- -----
        ------------ -
          -------- --
        -
      -
    -
  -
-

2.3 构建输出

在 vue-cli3 中，我们可以通过 configureWebpack.outputDir 选项来指定构建输出目录。下面是一个配置构建输出目录的示例：

module.exports = {
  configureWebpack: {
    outputDir: 'dist'
  }
}

3. 总结

通过本文的介绍，我们了解了 vue-cli3 中 vue.config.js 文件的基本结构和常用的配置选项。在实际开发中，我们可以根据项目的需求来灵活配置这些选项，从而优化项目的构建和开发过程。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6584d1c7d2f5e1655df65a67