前言:用vue2搭建的项目比较古老,运行时 babel 配置报错,本来用babel,是为了兼容 Android 低版本白屏问题,集各家之所长,配置的比较乱。稍微更改node或者npm 版本 就会运行不起来,痛定思痛,重新研究了文档,然后再加上拜读了许多文章,终于配好了自己项目中的babel,此时记录,实属为心酸泪纪念。
版本
7.24.0
babel.config.js 配置
module.exports = function (api) {
api.cache(true);
const presets = [
["@babel/preset-env", {
"useBuiltIns": 'usage', // 默认 false, 可选 entry , usage
"corejs": 3,
}],
];
const plugins = [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant'],
[
"@babel/plugin-transform-runtime"
]
];
return {
presets,
plugins
};
}
main.js 配置:
页面最顶部 放置代码:
import 'core-js/stable'
package.js 安装 babel 相关
core-js @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime
安装在 devDependencies 下就行
安装的时候,命令是:
npm i core-js @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime --save-dev
还有 vue.config.js
devServer 下的配置,因为没涉及到更改,所以此处未改动,可以自行搜索看一下配置,嘿嘿嘿,我有点懒~,主要的还是babel得配置 能不出错就行
写在后面,当前我的配置已最新的为模板,
- 如果 babel 用的是6.x 需要兼容IE低版本,Android低版本,需要引入 babel-polyfill 这些,
- 如果 babel 用的是7.x 但是低于7.4版本的话,需要在main.js里面多引入 import ‘regenerator-runtime/runtime’
🌰: 7.x 小于 7.4
main.js
import 'core-js/stable'
import 'regenerator-runtime/runtime'
复制代码的时候,一定要看仔细哦,万一我写错了,希望及时纠正我,谢谢观看~
参考网页:https://juejin.cn/post/7147582343471955999?searchId=20240624193040BCA6B325E1293951C956