VUE CLI 配置详解
vue cli的配置项简述
vue.config.js是一个可选的配置文件。一般在项目的根目录下，和package.json同级。
某个配置文档
publicPath
打包之后的包存放的路径
- Type:
string - Default:
'/'
项目打包之后在项目中存放的路径，默认值为：‘/’，如果要特定的放在某个目录下，需要通过该参数设置。
默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。
如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径
outputDir
打包之后的包的包名
- Type:
string - Default:
'dist'
项目打包完之后的包名，默认命名为：‘dist’，如果需要指定打包的包名，那么就需要使用该参数进行设定。
当运行 vue-cli-service build 时生成的生产环境构建文件的目录。
注意目标目录的内容在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。也就是每次打包之前，都会清空该路径指向的目录，用来装新的打包之后的包
**注意：**请始终使用 outputDir 而不要修改 webpack 的 output.path。
assetsDir
打包之后的包中存放静态资源的文件目录
- Type:
string - Default:
''
在打包之后的包中存放静态资源的文件目录，在打包之后的包中的目录
放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
**注意：**从生成的资源覆写 filename 或 chunkFilename 时，assetsDir 会被忽略。
indexPath
打包的包（dist）中的index.html文件的目录
- Type:
string - Default:
'index.html'
打包的包（dist）中的index.html文件的目录，默认就是dist的下一级，也就是打包之后的包的根目录。
指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
filenameHashing
- Type:
boolean - Default:
true
默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而，这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。
通俗的理解：
执行 npm run build 之后的 dist 目录的静态资源的文件名多会追加上 hash 值，比如: page1.f151b4d3.js
那如果不要 hash 呢，你只需要配置 vue.config.js 文件中的 filenamehashing
官方文档也提到了因为 html 也是我们通过插件生成的，静态资源直接就 inject 进去的，所以，当 html 不是自动生成或者其他情况时候，就不能加 hash 了，可以配置 false。
pages
- Type:
Object - Default:
undefined
在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是：
- 一个指定了
entry,template,filename,title和chunks的对象 (除了entry之外都是可选的)； - 或一个指定其
entry的字符串。
module.exports = {
pages: {
index: {
// page 的入口
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %>
title: 'Index Page',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时，
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话，就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
subpage: 'src/subpage/main.js'
}
}
范例：
vue.config.js文件是Vue CLI的配置文件，其中的pages配置项用来配置多页面应用。
pages配置项是一个对象，其中的key题面的路径, value 题面的入口文件。例如:
module.exports = {
pages: {
index: {
entry:'src/ index/main.js '，
template: 'public/index.html',
filename: 'index. html'.
},
about: {
entry: 'src/about/main.js',
template: 'public/about.html',
filename:'about.html'，
},
}，
};
这样配置后，Vue CLI会自动生成两个页面，分别是/index和/about,其中index页面的入口文件是src/index/main.js,模板文件是public/index.html,生成的文件名是index html。
lintOnSave
- Type:
boolean|'warning'|'default'|'error' - Default:
'default'
d
是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。
用途
设置是否在开发环境下每次保存代码时都启用 eslint验证。
value：
false：关闭每次保存都进行检测
true：开启每次保存都进行检测，效果与warning一样
‘warning’：开启每次保存都进行检测，lint 错误将显示到控制台命令行，而且编译并不会失败。
‘error’：开启每次保存都进行检测，lint 错误将显示到浏览器页面上，且编译失败。
‘default’：同’error’
用法：
module.exports = {
publicPath: './', // 基本路径
outputDir: 'dist', // 输出文件目录
assetsDir: './assets',
indexPath: 'index.html',
filenameHashing: true, // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
lintOnSave: false, // eslint-loader 是否在保存的时候检查
}
runtimeCompiler
- Type:
boolean - Default:
false
是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。
transpileDependencies
- Type:
boolean | Array - Default:
false
默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项，以避免构建后的代码中出现未转译的第三方依赖。
不过，对所有的依赖都进行转译可能会降低构建速度。如果对构建性能有所顾虑，你可以只转译部分特定的依赖：给本选项传一个数组，列出需要转译的第三方包包名或正则表达式即可。
处理兼容性问题
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
// node_modules里的依赖默认是不会编译的,会导致es6语法在ie中的语法报错,
// 所以需要在vue.config.js中使用transpileDependencies属性配置node_modules
// 中指定哪些文件夹或文件需要编译.
transpileDependencies: true
//true的时候是全部编译
})
productionSourceMap
- Type:
boolean - Default:
true
如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
每个文件打包后都会出现一个.map文件，.map文件会出现一定的网络安全问题，我们可以通过productionSourceMap进行操作，使打包的文件不在出现.map文件，打包后的文件体积也会减少。
crossorigin
- Type:
string - Default:
undefined
设置生成的 HTML 中 和