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 配置的示例：

// javascriptcn.com 代码示例
module.exports = {
  chainWebpack: config => {
    // 通过 webpack-merge 合并配置
    config = require('webpack-merge').merge(config, {
      // 修改 webpack 配置
      module: {
        rules: [
          {
            test: /\.txt$/,
            use: 'raw-loader'
          }
        ]
      }
    })
  },
  configureWebpack: {
    // 修改 webpack 配置
    module: {
      rules: [
        {
          test: /\.txt$/,
          use: 'raw-loader'
        }
      ]
    }
  }
}

2.2 代理设置

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

// javascriptcn.com 代码示例
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

2.3 构建输出

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

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

3. 总结

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

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6584d1c7d2f5e1655df65a67