vue-cli5 配置转es5
时间: 2024-02-17 11:00:54 浏览: 323
Vue CLI 5 默认使用了 Babel 7 来将 ES6+ 语法转换成 ES5 语法,以下是在 Vue CLI 5 中配置 Babel 将 Vue 项目转换成 ES5 语法的步骤:
1. 在 Vue 项目根目录下创建一个名为 `.babelrc` 的文件,文件内容如下:
```json
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3
}
]
]
}
```
这个文件告诉 Babel 使用 `@babel/preset-env` 插件将 ES6+ 语法转换成 ES5,并且使用 `usage` 模式来按需加载 polyfill,以减小打包后的文件体积。`corejs` 参数指定使用 core-js@3 来提供 polyfill。
2. (可选) 如果需要兼容 IE11 及以下的浏览器,需要安装 `@vue/cli-plugin-babel/preset`:
```bash
npm install --save-dev @vue/cli-plugin-babel/preset
```
3. 在 Vue 项目根目录下的 `vue.config.js` 文件中添加以下配置:
```javascript
module.exports = {
transpileDependencies: [
'vue-echarts',
'resize-detector'
]
}
```
这个配置告诉 Vue CLI 在构建时将 `vue-echarts` 和 `resize-detector` 这两个依赖库也进行 Babel 转换,以确保它们能够在低版本浏览器中正常运行。
4. 运行 `npm run build` 命令,将 Vue 项目打包成 ES5 语法的代码。
这样,经过 Babel 的处理,Vue 项目中的 ES6+ 语法就被转换成了 ES5 语法,可以在较老的浏览器中运行了。
阅读全文