vue-cli在非生产环境构建时(process.env.NODE_ENV !== 'production'),会默认应用开发模式,
例如在大禹环境构建时,希望环境变量设置成非production,且希望应用production的特性,如文件名hash和代码压缩等,这时需要将production的一些默认webpack配置手动应用到vue.config.js中。
首先在vue.config.js中加入配置
// vue.config.js
const NamedChunksPlugin = require('webpack/lib/NamedChunksPlugin');
const HashedModuleIdsPlugin = require('webpack/lib/HashedModuleIdsPlugin');
module.exports = {
configureWebpack: {
mode: 'production',
plugins: [
/* config.plugin('hash-module-ids') */
new HashedModuleIdsPlugin({
hashDigest: 'hex',
}),
/* config.plugin('named-chunks') */
new NamedChunksPlugin(function () {
/* omitted long function */
}),
],
},
chainWebpack(config) {
config.plugin('named-chunks').use(require('webpack/lib/NamedChunksPlugin'), [
chunk => {
if (chunk.name) {
return chunk.name;
}
const hash = require('hash-sum');
const joinedHash = hash(Array.from(chunk.modulesIterable, m => m.id).join('_'));
return `chunk-` + joinedHash;
},
]);
config.plugin('hash-module-ids').use(require('webpack/lib/HashedModuleIdsPlugin'), [
{
hashDigest: 'hex',
},
]);
},
}
然后重新启动
npm run dev