const path = require('path')
function resolve(dir) {
return path.join(__dirname, '.', dir)
}
module.exports = {
publicPath: './',
productionSourceMap: false,
devServer: {
proxy: {
// 替换
'/commonApi': {
target: process.env.VUE_APP_API_PATH,
pathRewrite: {
'^/commonApi': '/api/resource'
}
},
// 拼接
'/api': {
target: process.env.VUE_APP_URL,
},
}
},
chainWebpack: config => {
// svg rule loader
config.optimization.minimize(true);
config.optimization.splitChunks({
chunks: "all",
maxInitialRequests: Infinity,
minSize: 300000, // 依赖包超过300000bit将被单独打包
automaticNameDelimiter: "-",
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
return `chunk.${packageName.replace("@", "")}`;
},
priority: 10
}
}
});
const svgRule = config.module.rule('svg') // 找到svg-loader
svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
svgRule // 添加svg新的loader处理
.test(/\.svg$/)
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
// 修改images loader 添加svg处理
const imagesRule = config.module.rule('images')
imagesRule.exclude.add(resolve('src/assets/icons'))
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
},
}
vue config配置 proxy、打包拆包处理
最新推荐文章于 2024-05-31 09:29:02 发布