如何使执行build:ceshi打出的包与执行build:production, 打出的包一致?
package.json
设置
"build:ceshi": "vue-cli-service build --mode ceshi",
"build:preview": "vue-cli-service build --mode preview",
"build:production": "vue-cli-service build --mode production",
"build:stage": "vue-cli-service build --mode staging",
vue.config.js
配置:
config
.when(process.env.VUE_APP_ENVIRONMENT !== 'dev',
config => {
config
.optimization.splitChunks({
chunks: 'all',
maxInitialRequests: Infinity, // 默认为3,调整为允许无限入口资源
minSize: 20000,
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?xqh-element(.*)/ // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: path.resolve(__dirname, 'src/components'),
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
},
vendors: {
// 拆分依赖,避免单文件过大拖慢页面展示
// 得益于HTTP2多路复用,不用太担心资源请求太多的问题
name (module) {
// 拆包
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
// 进一步将Ant组件拆分出来,请根据情况来
// const packageName = module.context.match(/[\\/]node_modules[\\/](?:ant-design-vue[\\/]es[\\/])?(.*?)([\\/]|$)/)[1]
return `npm.${packageName.replace('@', '')}` // 部分服务器不允许URL带@
},
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial'
}
}
})
config.optimization.runtimeChunk('single')
config.optimization.minimizer = [
new UglifyJsPlugin({
uglifyOptions: {
// 删除注释
output: {
comments: false
},
// 删除console debugger 删除警告
compress: {
drop_console: true, //console
drop_debugger: false,
pure_funcs: ['console.log'] //移除console
}
}
})
]
}
)
奇怪的是当执行build:ceshi
, 打出的包是这样的:
当执行build:production
, 打出的包是这样的, 分包更小:
.env
文件内容都是一样的
为什么会这样呢, 如何使执行build:ceshi
打出的包与执行build:production
, 打出的包一致?
.env.ceshi
里面添加NODE_ENV = production
就可以了, 只是不明白为什么, 希望大佬不吝赐教
回复
1个回答
test
2024-06-23
.env.ceshi
的开头加上 NODE_ENV = production
就可以了
一般来说是这样的:
# 测试环境配置
# 编译模式
NODE_ENV = production
BABEL_ENV = production
# 部署目录
VUE_APP_PUBLIC_PATH = /
# 接口地址
VUE_APP_API_BASE = xxxxx
# 代理地址
VUE_APP_API_PROXY = xxxxx
也可以用 cross-env
在 package.json
的执行的脚本中指定编译模式。但是直接修改 .env
文件就好了,多个包多个麻烦。
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容