vue.config.js 配置详解
简介
vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。
这个文件应该导出一个包含了选项的对象:
module.exports = {
}
或者,你也可以使用 @vue/cli-service 提供的 defineConfig 帮手函数,以获得更好的类型提示:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
})
publicPath
由于在Vue CLI 3.3 之后baseUrl 已被弃用,使用publicPath 进行替代。
默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/ ,此时publicPath 的值为/ 如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/ ,则设置 publicPath 为 /my-app/ 。
相对 publicPath 的限制
相对路径的 publicPath 有一些使用上的限制。在以下情况下,应当避免使用相对 publicPath :
- 当使用基于 HTML5
history.pushState 的路由时; - 当使用
pages 选项构建多页面应用时。
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/admin/' : '/'
}
outputDir
- Type:
string - Default:
'dist'
在Vue 的项目中当运行npm run build 对项目进行生产环境打包时生成的文件夹通常命名为dist 可以通过更改此配置来更改文件夹的名称
提示
请始终使用 outputDir 而不要修改 webpack 的 output.path 。
module.exports = {
outputDir: 'dist'
}
assetsDir
提示
从生成的资源覆写 filename 或 chunkFilename 时,assetsDir 会被忽略。
module.exports = {
assetsDir: 'static'
}
indexPath
module.exports = {
assetsDir: 'index.html'
}
filenameHashing
module.exports = {
filenameHashing:false
}
pages
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'
}
}
提示
当在 multi-page 模式下构建时,webpack 配置会包含不一样的插件 (这时会存在多个 html-webpack-plugin 和 preload-webpack-plugin 的实例)。如果你试图修改这些插件的选项,请确认运行 vue inspect 。
lintOnSave
- Type:
boolean | 'warning' | 'default' | 'error' - Default:
'default'
检验语法规范,只有当安装了@vue/cli-plugin-eslint 之后才会生效。
设置为 true 或 'warning' 时,eslint-loader 会将 lint 错误输出为编译警告。默认情况下,警告仅仅会被输出到命令行,且不会使得编译失败。
如果你希望让 lint 错误在开发时直接显示在浏览器中,你可以使用 lintOnSave: 'default' 。这会强制 eslint-loader 将 lint 错误输出为编译错误,同时也意味着 lint 错误将会导致编译失败。
设置为 error 将会使得 eslint-loader 把 lint 警告也输出为编译错误,这意味着 lint 警告将会导致编译失败。
或者,你也可以通过设置让浏览器 overlay 同时显示警告和错误:
module.exports = {
devServer: {
overlay: {
warnings: true,
errors: true
}
}
}
当 lintOnSave 是一个 truthy 的值时,eslint-loader 在开发和生产构建下都会被启用。如果你想要在生产构建时禁用 eslint-loader ,你可以用如下配置:
module.exports = {
lintOnSave: process.env.NODE_ENV !== 'production'
}
runtimeCompiler
transpileDependencies
-
Type: boolean | Array<string | RegExp> -
Default: false 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项,以避免构建后的代码中出现未转译的第三方依赖。 不过,对所有的依赖都进行转译可能会降低构建速度。如果对构建性能有所顾虑,你可以只转译部分特定的依赖:给本选项传一个数组,列出需要转译的第三方包包名或正则表达式即可。
module.exports = {
transpileDependencies: [
'vue-echarts',
'resize-detector'
]
}
productionSourceMap
crossorigin
-
Type: string -
Default: undefined 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。 需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html ) 中的标签不受影响。 更多细节可查阅: CORS settings attributes
configureWebpack
对象形式
configureWebpack:{
resolve: {
alias: {
'assets': '@/assets',
'common': '@/common',
'components': '@/components',
'network': '@/network',
'configs': '@/configs',
'views': '@/views',
'plugins': '@/plugins',
}
}
},
对象形式可以为某些特定文件夹区别名
也可以写成如下形式:
configureWebpack: {
name: name,
resolve: {
alias: {
'@': resolve('src'),
'@crud': resolve('src/components/Crud')
}
}
},
函数形式
configureWebpack:
(config) => {
if (process.env.NODE_ENV === 'production') {
config.mode = 'production'
} else {
config.mode = 'development'
}
Object.assign(config.resolve, {
alias: {
'@': path.resolve(__dirname, './src'),
'assets': path.resolve(__dirname, './src/assets'),
'common': path.resolve(__dirname, './src/common'),
'components': path.resolve(__dirname, './src/components'),
'network': path.resolve(__dirname, './src/network'),
'configs': path.resolve(__dirname, './src/configs'),
'views': path.resolve(__dirname, './src/views'),
'plugins': path.resolve(__dirname, './src/plugins'),
}
})
},
chainWebpack
chainWebpack:(config)=>{
config.plugins.delete('preload');
config.plugins.delete('prefetch');
config.plugin('html').tap(args=>{
args[0].title=name
return args
})
config.resolve.alias
.set('@',resolve('./src'))
.set('components',resolve('./src/components'))
.set('views',resolve('./src/views'))
.set('assets',resolve('./src/assets'))
}
或者
chainWebpack(config) {
config.plugins.delete('preload')
config.plugins.delete('prefetch')
config.module
.rule('svg')
.exclude.add(resolve('src/assets/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions.preserveWhitespace = true
return options
})
.end()
config
.when(process.env.NODE_ENV === 'development',
config => config.devtool('cheap-source-map')
)
config
.when(process.env.NODE_ENV !== 'development',
config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
inline: /runtime\..*\.js$/
}])
.end()
config
.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial'
},
elementUI: {
name: 'chunk-elementUI',
priority: 20,
test: /[\\/]node_modules[\\/]_?element-ui(.*)/
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'),
minChunks: 3,
priority: 5,
reuseExistingChunk: true
}
}
})
config.optimization.runtimeChunk('single')
}
)
},
devServer
devServer: {
port: 8090,
open: true,
}
devServer.proxy
devServer: {
port: 8090,
open: true,
proxy: {
"/opAdmin": {
target: "http://116.66.65.193:8081",
changeOrigin: true,
pathRewrite: {
"^/opAdmin": "/opAdmin"
}
},
"/DoorStatus": {
target: "http://47.99.11.102:8088",
changeOrigin: true
}
}
}
|