本文共 2908 字，大约阅读时间需要 9 分钟。

imagination Previous issue中，关于 Vue 项目的配置，已有不少同学会有疑问。、，

在 Vue 项目中, 我们可以通过 vue.config.js 文件来进行自定义配置， 而不是传统的 build 和 config 目录的设置。在 Vue 2.x 及以后版本中, 大部分配置已经被封装并集成到 vue.config.js 文件中。默认情况下, 项目会基于此文件进行配置, 如果没有开启定制配置, 项目会按照默认的配置进行打包和编译。

一、 vue.config.js 的作用

vue.config.js 是一个可选的配置文件, 可在项目根目录下创建。它是一个 JavaScript 文件, 用于定义 Vue CLI 服务的配置选项。当这个文件存在时, Vue CLI 会自动加载它进行配置, 否则会根据 CLI 命令执行默认配置。

简单来说, 以下情况需要自定义配置:

• 需要对打包过程进行定制
• 想强化默认配置
• 需要添加额外的构建配置
• 需要修改现有的默认行为

二、默认配置参数

Vue CLI 提供了丰富的默认配置, 从源打包到输出准备都有所提供. 下面是一个完整的 vue.config.js 默认配置示例:

module.exports = {
     // 工作目录 baseUrl: '/',
     // 输出目录 outputDir: 'dist',
     // 检查保存 lintOnSave: true,
     // 启用运行时编译器 compiler: false,
     // Webpack 配置 (可选)
     chainWebpack: () => {},
     // 配置 Webpack
     configureWebpack: () => {},
     // Vue Loader 配置
     vueLoader: {},
     // 生产环境 source map
     productionSourceMap: true,
     // CSS 配置
     css: {
         // 分离 CSS 插件 ExtractTextPlugin
         extract: true,
         // CSS source map
         sourceMap: false,
         // CSS预设器
         loaderOptions: {},
         // 启用 CSS 模块
         modules: false,
     },
     // globle parallel plugin
     parallel: require('os').cpus().length > 1,
     // Dll 模式配置
     dll: false,
     // PWA 配配置
     pwa: {},
     // Webpack-dev-server 配置
     devServer: {
         open: process.platform === 'darwin',
         host: '0.0.0.0',
         port: 8080,
         https: false,
         hotOnly: false,
         proxy: null,
         before: app => {}
     },
     // 插件选项配置
     pluginOptions: {}
 }

三、配置使用实例

以下是一些常见配置示例, 帮助开发者更好地定制项目配置.

3.1 代理设置

如果要在项目中配置代理, 例如前端项目对后端服务器的调用, 可在 devServer 中设置如下配置:

module.exports = {
     devServer: {
         proxy: {
             '/api': {
                 target: 'http://api.example.com',
                 ws: true,
                 changeOrigin: true
             },
             '/foo': {
                 target: 'http://foo.example.com',
                 ws: true,
                 changeOrigin: true
             }
         }
     }
 }

3.2 启用 Dll 模式

Dll 模式可有效地限制生成文件的数量, 方便缓存和 confront 方面的优化. 配置方式如下:

module.exports = {
     dll: {
         'dep-a': 'path/to_dep-a.js',
         'dep-b/some/nested/file.js': 'path/to_dep-b.js'
     }
 }

需要注意, 这里需要提供完整的依赖路径, 有效配置才能发挥作用.

3.3 静态资源引用

在项目的 public 文件夹中存放静态资源, 如图片、字体等资源时, 可通过 publicPath 配置项进行访问. 值得注意的是:

• 在 public/index.html 中, 无需自己定义静态资源的链接, 可直接使用 <%= webpackConfig.output.publicPath %$> 之类的变量来体现.
• 在 Vue 组件中引用静态资源时, 可按照 ${baseUrl} 格式进行处理, 其中 baseUrl 会根据 BASE_URL 环境变量配置.

四、优化实例

在实际项目中, 可根据需要在 vue.config.js 中进行如下优化:

五、总结

vue.config.js 文件为 Vue 项目的配置提供了灵活性和扩展性, 默认配置已经足够绝大部分常规项目的使用. 在需要定制化项目配置时, 建议根据项目需求谨慎添加或修改配置, 避免因配置错误导致打包失败或生产问题.