Vue 3.x的版本中build后dist文件中出现legacy的js文件问题,是由于在Vue 3.x的版本中,开发团队加入了 Webpack 5 的新特性—— 模块还原 /esModule,这些变化导致了一些旧版浏览器中无法兼容这些新特性,因此需要生成一个legacy版本的js文件来兼容这些浏览器。
以下是如何解决这个问题的完整攻略:
1.修改 package.json 的 build 命令
在 package.json 的 build 命令中,使用 --target 属性来指定编译的浏览器版本,例如以下代码:
"build": "vue-cli-service build --target 'es5' --modern"
在这个命令中,我们将编译目标设置为 ES5(旧版浏览器),并使用了 --modern 来同时生成一个现代(支持较新浏览器)和一个旧版兼容文件。当命令完成时,dist 文件夹中应该会出现两个文件夹,一个名为 legacy,另一个名为 modern。
2.修改 vue.config.js 文件
如果你已经使用了 vue-cli 4.x 及更高版本,则可以通过 vue.config.js 文件来配置目标浏览器版本并生成对应的legacy文件。在vue.config.js文件中添加以下代码:
module.exports = {
productionSourceMap: false,
configureWebpack: {
output: {
filename: '[name].[hash:8].js',
chunkFilename: '[name].[hash:8].js',
},
},
chainWebpack: (config) => {
config.when(process.env.NODE_ENV === 'production', (config) => {
config.optimization.delete('splitChunks');
config.output.filename('[name].[hash:8].js').end();
config.output.chunkFilename('[name].[hash:8].js').end();
config.module.rule('vue').use('vue-loader').tap((options) => {
options.compilerOptions.whitespace = 'preserve';
return options;
});
config.module.rule('images').test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/).use('url-loader').loader('url-loader').end();
});
config.when(process.env.NODE_ENV === 'development', (config) => {
config.optimization.splitChunks(false);
});
config.when(process.env.NODE_ENV === 'production' && process.env.VUE_APP_MODE === 'legacy', (config) => {
config.entry('app').clear().add('./src/main-legacy.js');
config.performance.hints(false);
config.output.filename('js/[name].[hash:8].legacy.js').end();
config.output.chunkFilename('js/[name].[hash:8].legacy.js').end();
config.module.rule('vue').use('vue-loader').tap((options) => {
options.compilerOptions.modules = [
{
preTransformNode(astEl) {
if (process.env.NODE_ENV === 'production') {
if (options.functional) {
astEl.functional = true;
const { props } = astEl;
if (props) {
props.forEach((prop) => {
if (prop.type === 1) {
prop.value = `__$props[\'${prop.name}\']`;
delete prop.name;
}
});
}
}
}
return astEl;
},
},
];
return options;
});
});
},
};
该代码将在有需要时,按照指定的方式对目标浏览器版本进行自定义构建,并生成对应的旧版兼容文件。
在以上代码中,我们通过添加 process.env.VUE_APP_MODE 环境变量来指示使用指定的构建模式生成旧版兼容文件。
总结
在Vue 3.x的版本中build后dist文件中出现legacy的js文件问题,可以通过两种方法来解决这个问题。第一个方法是在 package.json 的 build 命令中添加 --target 属性来指定编译目标,并同时生成现代和旧版兼容文件。第二个方法是在 vue.config.js 文件中自定义构建并生成旧版兼容文件。无论使用哪种方法,你都可以有效地解决这个问题,确保你的Vue应用程序能够在所有浏览器上正确运行。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Vue3.x的版本中build后dist文件中出现legacy的js文件问题 - Python技术站