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

Vue CLI 配置参考

Vue CLI 提供了丰富的配置选项，以下是主要配置项的说明及示例：

全局 CLI 配置

Vue CLI 的全局配置通常存储在 ~/.vuerc 文件中。用户可以手动编辑该文件，或使用 vue config 命令查看或修改配置。

目标浏览器

请参考相关指南章节以获取目标浏览器的配置信息。

Vue CLI 配置文件 (vue.config.js)

创建或编辑 vue.config.js 文件时，需导出一个包含选项的对象：

// vue.config.jsmodule.exports = {  // 配置选项...}

常用配置选项

baseUrl（已弃用，使用 publicPath 替代）

• Type: string
• Default: '/'
• 说明: 部署应用时的基本 URL。建议始终使用 publicPath 而不是直接修改 webpack 的 output.publicPath。

publicPath

• Type: string

• Default: '/'

• 说明: 部署应用时的基本路径。例如，若应用部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 '/my-app/'。

• 注意：在开发环境下同样生效，可使用条件式配置：

  module.exports = {  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'}

outputDir

• Type: string
• Default: 'dist'
• 说明: 生产环境构建文件的目录，默认会被清除（可通过 --no-clean 参数关闭清除行为）。

assetsDir

• Type: string
• Default: ''
• 说明: 放置生成静态资源（如 JS、CSS、IMG、fonts）的目录（相对于 outputDir）。

indexPath

• Type: string
• Default: 'index.html'
• 说明: 生成的 index.html 输出路径（相对于 outputDir）。

filenameHashing

• Type: boolean
• Default: true
• 说明: 在静态资源文件名中添加哈希值以优化缓存。需确保使用 Vue CLI 生成的 index.html。

多页面应用配置 (pages)

在 vue.config.js 中设置多页面应用：

module.exports = {  pages: {    index: {      entry: 'src/index/main.js',      template: 'public/index.html',      filename: 'index.html',      title: 'Index Page',      chunks: ['chunk-vendors', 'chunk-common', 'index']    },    subpage: 'src/subpage/main.js'  }}

lintOnSave

• Type: boolean | 'warning' | 'default' | 'error'
• Default: 'default'
• 说明: 开启 lint onSave 可能会在开发环境下显示 lint 错误或警告。通过 devServer.overlay 可以将 lint 错误显示在浏览器中。

runtimeCompiler

• Type: boolean
• Default: false
• 说明: 是否使用包含运行时编译器的 Vue 版本。如果启用，将支持 template 选项，但会增加应用体积（约 10kb）。

transpileDependencies

• Type: Array<string | RegExp>
• Default: []
• 说明: 指定需要显式转译的依赖项。默认情况下，babel-loader 会忽略 node_modules 中的文件。

productionSourceMap

• Type: boolean
• Default: true
• 说明: 是否在生产环境下生成 source map。关闭可加速构建。

跨域设置 （crossorigin）

• Type: string
• Default: undefined
• 说明: 设置生成的 HTML 中 CSS 和 JS 标签的跨域属性。仅影响由 html-webpack-plugin 注入的标签。

Webpack 配置

通过 configureWebpack 或 chainWebpack 进行更详细的 Webpack 配置。

CSS 模块

css.requireModuleExtension

• Type: boolean
• Default: true
• 说明: 默认情况下，只有 .module.* 结尾的文件会被视为 CSS 模块。设置为 false 后，所有 .css、.scss 等文件都会被视为 CSS 模块。

CSS 提取

• Type: boolean | Object
• Default: 生产环境下 true，开发环境下 false
• 说明: 是否将组件 CSS 提取为独立文件。默认情况下，在开发环境下关闭以支持热重载。

CSS SourceMap

• Type: boolean
• Default: false
• 说明: 是否为 CSS 开启 source map。开启后可能影响构建性能。

CSS Loader 选项

通过 css.loaderOptions 配置 CSS loader 的选项：

module.exports = {  css: {    loaderOptions: {      css: {},      postcss: {}    }  }}

开发服务器配置 (devServer)

代理配置

module.exports = {  devServer: {    proxy: 'http://localhost:4000'  }}

并行构建

module.exports = {  parallel: require('os').cpus().length > 1}

PWA 配置

module.exports = {  pwa: {    workbox: {      generateSW: true,      swSrc: 'src/sw.js'    }  }}

插件选项

通过 pluginOptions 配置插件选项：

module.exports = {  pluginOptions: {    myPlugin: {      option1: 'value1',      option2: 'value2'    }  }}

Babel 配置

建议使用 babel.config.js 文件进行配置，而非 .babelrc 或 package.json 中的 babel 字段。

ESLint 配置

可以通过 .eslintrc 或 package.json 中的 eslintConfig 字段进行配置。

通过以上配置，您可以根据项目需求灵活调整 Vue CLI 的行为和输出结果。

转载地址：http://qzvwz.baihongyu.com/