vue-cli 3.X webpack配置(resolve.alias的配置)
一、configureWebpack对象形式
configureWebpack:{
resolve: {
// 别名配置
alias: {
'assets': '@/assets',
'common': '@/common',
'components': '@/components',
'network': '@/network',
'configs': '@/configs',
'views': '@/views',
'plugins': '@/plugins',
}
}
},
二、configureWebpack函数形式
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'),
}
})
},
详细说明
使用vue-cli3.x及以上版本与vue-cli2.x进行项目构建的区别之一,是生成的项目中,进行webpack配置的文件没有了。因为3.x,将大部分相同的webpack配置,已封装到cli安装包中。
若想添加一些自己的项目配置,只需在项目的根目录下新建一个vue.config.js文件即可,内容如下:
module.exports = {
outputDir: 'dist', //打包文件输出路径,即打包到哪里
assetsDir: 'static', // 静态资源地址
lintOnSave: false, // eslint-loader 是否在保存的时候检查
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
filenameHashing: true, //文件hash
// chainWebpack 这个库提供了一个webpack原始配置的上层抽象,使其可以定义具名的 loader规则和具名插件,
// 可以通过其提供的一些方法链式调用,在cli-service中就使用了这个插件
chainWebpack: () => {},
/* configureWebpack是调整webpack配置最简单的一种方式,可以新增也可以覆盖cli中的配置。
可以是一个对象:被 webpack-merge 合并到 webpack 的设置中去
也可以是一个函数:如果你需要基于环境有条件地配置行为,就可以进行一些逻辑处理,可以直接修改或新增配置,(该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内,可以直接修改配置,或者返回一个将会被合并的对象。
*/
configureWebpack: {}
}
配置 import 和 require 等路径别名。
webpack 中是通过 resolve.alias 来实现此功能的,参考: https://www.webpackjs.com/con...。
在vue-cli3.x中我们可以通过以下几种方式实现:
1.直接修改 cli-service 文件,添加webpack的相关配置。
按图片中路径打开 base.js 文件:
可以通过set方法添加想要的 alias 配置,不推荐此方式。
2.在vue.config.js 中使用 chainWebpack 的方式
const path = require('path')
function resolve (dir) {
//此处可使用 path.resolve 或 path.join
return path.join(__dirname, dir)
}
module.exports = {
devServer: {
...
},
lintOnSave: false, // eslint-loader 是否在保存的时候检查
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
filenameHashing: true, //文件hash
chainWebpack: config => {
config.resolve.alias
// 自定义key,value,如.set('@assets', resolve('src/assets'))
.set(key,value)
}
}
3.在 vue.config.js 中使用 configureWebpack 的方式
对象形式,会和cli中的设置合并到一起
const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
devServer: {
...
},
lintOnSave: false, // eslint-loader 是否在保存的时候检查
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
filenameHashing: true, //文件hash
configureWebpack: {
resolve: {
alias: {
'@assets': resolve('src/assets')
}
}
},
}
函数形式
const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
devServer: {
...
},
lintOnSave: false, // eslint-loader 是否在保存的时候检查
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
filenameHashing: true, //文件hash
configureWebpack: config => {
if (isProduction) {
...
} else {
...
}
//直接修改配置
config.resolve.alias['@asset'] = resolve('src/assets')
}
}
或者:
const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
devServer: {
...
},
lintOnSave: false, // eslint-loader 是否在保存的时候检查
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
filenameHashing: true, //文件hash
configureWebpack: config => {
if (isProduction) {
...
} else {
...
}
//返回一个将要合并的对象
return {
resolve: {
alias: {
'@asset':resolve('src/assets')
}
}
}
}
}
最好不要使用下面的方式,因为Object.assign方法在合并对象时,如果目标对象(config)上有相同的属性(resolve),将会被覆盖掉。不过这样写 Object.assign(config.resolve,{alias:{}})
还是可以的,只是覆盖掉了alias。
Object.assign(config, {
resolve: {
alias: {
'@': resolve('./src'),
'@assets': resolve('./src/assets')
}
}
})
合并后,变成:
alias: {
'@': resolve('./src'),
'@assets': resolve('./src/assets')
}
但是 cli-service 中 resolve 被覆盖掉后,它的其他属性将会消失。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。