问题描述
使用--mode production生产模式打包时，运行报如下异常：
![前端生产环境打包异常解决方案：Class constructor [ClassName] cannot be invoked without 'new'](https://doc.oinone.top/wp-content/uploads/2024/08/F037CF05-B223-405F-865C-6F1240874B8F.png)
![前端生产环境打包异常解决方案：Class constructor [ClassName] cannot be invoked without 'new'](https://doc.oinone.top/wp-content/themes/justnews/themer/assets/images/lazy.png)
问题原因
由于webpack打包时未正确识别继承类的ts写法，导致构造函数编译结果无法在js环境中正常运行。
解决方案
在启动工程的package.json中添加@vue/cli-plugin-babel依赖。
{
"devDependencies": {
"@vue/cli-plugin-babel": "4.5.15",
"babel-plugin-import": "^1.13.3",
"babel-plugin-module-resolver": "^4.1.0",
...
}
}在启动工程的vue.config.js中添加configureWebpack.module.rules配置，将node_modules中的vue-admin-base以及vue-admin-layout使用@babel/preset-env进行转译。
module.exports = {
...
configureWebpack: {
module: {
rules: [
{
test: /\.js$/,
include: /node_modules[\\/]@kunlun[\\/]vue-admin-base|vue-admin-layout/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
...
],
...
}
}
...
};Oinone社区 作者：张博昊原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/16158.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
