vue.config.js 文件是 Vue CLI 项目中的全局配置文件,它允许你以 JavaScript 的形式来配置构建选项,而不是通过命令行参数或者 .vue-clirc 的 JSON 格式。
官方文档: https://cli.vuejs.org/zh/config/#全局-cli-配置
publicPath
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',
};
outputDir
dist
。module.exports = {
outputDir: 'dist',
};
assetsDir
module.exports = {
assetsDir: "static",
};
indexPath
index.html
的输出路径 (相对于 outputDir)。也可以是一个绝对路径。默认 'index.html'
module.exports = {
indexPath: "index.html",
};
productionSourceMap
source map
,可以将其设置为 false
以加速生产环境构建。module.exports = {
productionSourceMap: false,
};
filenameHashing
hash
以便更好的控制缓存。然而,这也要求 index
的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML,你可以通过将这个选项设为 false
来关闭文件名哈希。默认 false
module.exports = {
filenameHashing: false,
};
lintOnSave
eslint
保存检测,有效值:ture
| false
| 'error'
。true
或 'warning'
时,eslint-loader
会将 lint
错误输出为编译警告。默认情况下,警告仅仅会被输出到命令行,且不会使得编译失败。lint
错误在开发时直接显示在浏览器中,你可以使用 lintOnSave: 'default'
。这会强制 eslint-loader
将 lint
错误输出为编译错误,同时也意味着 lint
错误将会导致编译失败。error
将会使得 eslint-loader
把 lint
警告也输出为编译错误,这意味着 lint
警告将会导致编译失败。false
关闭 lint
警告module.exports = {
lintOnSave: false,
};
runtimeCompiler
false
module.exports = {
runtimeCompiler: false,
};
更多细节可查阅: Runtime + Compiler vs. Runtime only
transpileDependencies
不过,对所有的依赖都进行转译可能会降低构建速度。如果对构建性能有所顾虑,你可以只转译部分特定的依赖:给本选项传一个数组,列出需要转译的第三方包包名或正则表达式即可。
module.exports = {
transpileDependencies: false,
};
crossorigin
和
标签的 crossorigin
属性。需要注意的是该选项仅影响由
html-webpack-plugin
在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
crossorigin
: 如果配置了该属性,会让浏览器启用CORS检查(判断响应头中Access-Control-Allow-Origin是否与当前文档同源),如果检查不通过,则浏览器拒绝执行代码。
stylesheet
: 导入样式表。link
标签使用了 rel="stylesheet"
表示该文件是一份样式表文件。可以让 HTML 页面具有更好的外观和布局。
module.exports = {
crossorigin: false,
};
integrity
在生成的 HTML 中的 和
标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的,启用该选项可以提供额外的安全性。
需要注意的是该选项仅影响由 html-webpack-plugin
在构建时注入的标签 - 直接写在模版 (public/index.html)
中的标签不受影响。
当启用 SRI 时,preload resource hints
会被禁用,因为 Chrome 的一个 bug 会导致文件被下载两次。
module.exports = {
integrity: false,
};
configureWebpack
module.exports = {
configureWebpack: {}, // ()=> {}
};
chainWebpack
module.exports = {
chainWebpack: ()=> {}
};
css.modules
css.requireModuleExtension
。 在 v3 中,这个选项含义与 css.requireModuleExtension
相反。module.exports = {
css: {
modules: false,
}
};
pages
module.exports = {
// 配置多页面入口
pages: {
index: { // 默认入口
// page 的入口
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时,
// template 中的 标签需要是 <%= htmlWebpackPlugin.options.title %>
title: 'Index Page',
// 片段注入到页面的地点,
// 可以是 (head / end / body / top / bottom)
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
otherpage: { // 新增的入口
// page 的入口
entry: 'src/otherpage/main.js',
// 模板来源
template: 'public/otherpage.html', // 或者 'public/otherpage/otherpage.html'
// 在 dist/otherpage.html 的输出
filename: 'otherpage.html',
// 当使用 title 选项时,
// template 中的 标签需要是 <%= htmlWebpackPlugin.options.title %>
title: 'Other Page',
// 片段注入到页面的地点,
// 可以是 (head / end / body / top / bottom)
chunks: ['chunk-vendors', 'chunk-common', 'otherpage']
}
}
}
参考链接: vue.config.js 配置多入口文件
module.exports = {
devServer: {
host: '0.0.0.0', // 让你的服务器可以被外部访问
port: 8080, // 端口
https: false, // 不使用 HTTP 提供服务
hot: true, // 模块热替换
open: true, // 打开浏览器
client:{
overlay: { // 当出现编译错误或警告时,在浏览器中显示全屏覆盖。
warnings: true,
errors: true
},
progress: true, // 在浏览器中以百分比形式打印编译进度。
},
headers: { // 设置请求头
'X-Custom-Header': 'value'
},
compress: true, // 启用 gzip 压缩
proxy: {
'/api': { // 对 /api 的请求会将请求代理到 http://localhost:4000。
target: 'http://localhost:4000',
changeOrigin: true, // 使 Origin 请求头中的主机名变为目标 URL 的主机名
secure: false, // 不验证 SSL 证书
logLevel: 'warn', // 代理的日志级别
ws: true, // 使用 WebSockets 作为服务器
pathRewrite: { // 重写路径
'^/api': ''
},
router: function(req) {
if (req.url.startsWith('/api')) {
return '/api';
}
return false;
},
context: ['/api'],
bypass: function(req) {
if (req.headers.accept.indexOf('html') !== -1) {
return '/index.html';
}
}
}
},
contentBase: './public', // 开发服务器提供的静态文件目录
historyApiFallback: true, // 是否启用 HTML5 history API 的回退
before: function(app, server) {
// 在服务器启动之前执行的函数
},
after: function(app, server) {
// 在服务器启动之后执行的函数
},
setupMiddlewares: true, // 设置中间件
}
};
参考链接: vue.config.js 配置 devserve 配置
configureWebpack
允许你在 Vue CLI 项目中直接修改 Webpack 的配置。它可以通过一个对象或一个函数来实现。如果你使用的是一个函数,那么它会接收默认的 Webpack 配置作为参数,并且你应该返回一个修改过的配置对象。
配置示例:
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const WebpackObfuscator = require('webpack-obfuscator');
function resolve(dir) {
return path.join(__dirname, dir);
}
const name = '浏览器网页标题';
module.exports = {
configureWebpack: (config) => {
config.name = name,
config.resolve = {
...config.resolve,
alias: {
"@": resolve("src"), // 配置别名 @
'vue': path.resolve(__dirname, './', 'node_modules', 'vue') // 去重vue包,多个vue包会导致element-ui 里的 table 组件不生效
}
},
config.optimization = {
...config.minimizer,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // 去除 console.log
drop_debugger: true, // 去除 debugger
},
},
}),
]
}
if (process.env.NODE_ENV === 'production') {
config.plugins.push(
new WebpackObfuscator({
// 压缩代码
compact: true,
// 是否启用控制流扁平化(降低1.5倍的运行速度)
controlFlowFlattening: false,
// 随机的死代码块(增加了混淆代码的大小)
deadCodeInjection: false,
// 此选项几乎不可能使用开发者工具的控制台选项卡
debugProtection: false,
// 如果选中,则会在“控制台”选项卡上使用间隔强制调试模式,从而更难使用“开发人员工具”的其他功能。
debugProtectionInterval: false,
// 通过用空函数替换它们来禁用console.log,console.info,console.error和console.warn。这使得调试器的使用更加困难。
disableConsoleOutput: true,
// 标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
identifierNamesGenerator: 'hexadecimal',
log: false,
// 是否启用全局变量和函数名称的混淆
renameGlobals: false,
// 通过固定和随机(在代码混淆时生成)的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小,建议使用此选项,因为辅助函数可以引起注意。
rotateStringArray: true,
// 混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
selfDefending: true,
// 删除字符串文字并将它们放在一个特殊的数组中
stringArray: true,
rotateUnicodeArray: true,
// stringArrayEncoding: 'base64',
stringArrayEncoding: ['base64'],
stringArrayThreshold: 0.75,
// 允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小,并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
unicodeEscapeSequence: false,
// 允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小,并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
transformObjectKeys: true,
})
)
}
},
}
chainWebpack
是 Vue CLI 提供的一种更强大的方式来修改 Webpack 的配置。与 configureWebpack
不同,chainWebpack
使用 Webpack Chain API,它允许你以一种声明式的方式来修改 Webpack 配置
配置示例:
const path = require("path");
module.exports = {
chainWebpack: (config) => {
// 修改 HTML 插件的选项
config.plugin('html').tap(args => {
args[0].title = 'My App';
return args;
});
// 修改模块规则
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.options({
limit: 10000,
name: 'img/[name].[hash:7].[ext]'
});
// 去除 debugger
config.when(process.env.NODE_ENV === 'production', config => {
config.optimization.minimize(true);
config.optimization.minimizer('terser').tap(args => {
args[0].terserOptions.compress.drop_debugger = true;
return args;
});
});
// 添加别名
config.resolve.alias
.set('@components', resolve('src/components'))
.set('@assets', resolve('src/assets'));
// 添加额外的插件
config.plugin('define').tap(args => {
args[0]['process.env'].VUE_APP_VERSION = JSON.stringify(process.env.VUE_APP_VERSION || '');
return args;
});
// 修改输出选项
config.output.filename('[name].[contenthash].js');
},
};
function resolve(dir) {
return path.join(__dirname, dir);
}
参考链接: vue.config.js 配置configureWebpack 和 chainWebpack 以及一些常用配置