轻骑兵前端环境个人问题以及解决方法汇总
1 ?. 无法识别
2 找不到 xxxDrawer
3 eslint 报错
4 LayoutCore is not defined
?. 无法识别
?.
的学名是 可选链操作符,是ES2020的新特性。
首先是 nodejs 版本的问题,推荐 16.13.0 或者更新的版本(大版本不一定比小版本新)。
具体请看 https://node.green/#ES2020-features-optional-chaining-operator-----
这个问题解决办发分换包和不换包的。换包的方法就是在 front
根目录 执行 yarn
就可以了。
不换包的方法麻烦一点,需要改代码。
观察一下报错,发现报错都是在 node_modules 里面,而且都是 js 文件。也就是说,其实是babel-loader没有到执行到这里面的js文件,按道理应该是能执行到的,因为 BuildEnvironment 里面有 babel.config.js
。那么我们需要在 BuildEnvironment 里面的 vue.config.js
补一些配置。注意改这个文件夹一般是需要重启项目的。
// vue.config.js
module.exports = {
// 前面略
chainWebpack(config) {
// 前面略
// NEW //////////////////////////////////////////
config.module
.rule('babel')
.test(/\.js$/)
.include.add(resolve(__dirname, '../node_modules/xxxComponent')) // 这里是举个例子,实际上不止一个模块要改
.end()
.use('babel-loader')
.loader('babel-loader')
.options({
presets: '@vue/cli-plugin-babel/preset',
plugins: ['@babel/plugin-proposal-optional-chaining', '@babel/plugin-proposal-nullish-coalescing-operator'],
})
.end();
// NEW //////////////////////////////////////////
},
}
webpack loader规则的经典写法是对象数组,chainWebpack
里面是函数试的写法。最好看一下 webpack 文档,因为这个写法和原来的不是完全对应的,有些关键字改了。
找不到 xxxDrawer
这个是因为改了 xxxkj-base-ui-component
之后没有执行脚本更新样板代码,执行一下就好了。
进入这个文件夹,执行 npm run generate
。
eslint 报错
把BuildEnvironment里面的eslint关掉就可以了。
// vue.config.js
module.exports = {
// 前面略
lintOnSave: false
}
LayoutCore is not defined
还是BuildEnvironment里面。把 module.exports.configureWebpack.config.externals
里面的 LayoutCore 注释掉。
module.exports = {
// 前面略
configureWebpack: (config) => {
config.externals = {
vue: 'Vue'
// LayoutCore: 'LayoutCore', // 这句话注释掉
};
// 后面略
}
}
posted on 2023-05-11 22:56 fox_charon 阅读(146) 评论(0) 编辑 收藏 举报