vue/cli3项目兼容ie（转为es5）

最新推荐文章于 2025-05-22 14:05:27 发布

原创最新推荐文章于 2025-05-22 14:05:27 发布 · 1.5k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中确保在IE环境下使用ES6代码时的兼容性，包括安装必要的依赖、Babel配置、浏览器目标选择和Webpack设置等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用背景

因为做的项目会在IE环境下运行的情况，按正常vue支持来说，IE8+应该是支持的，可是ES6写法需要进行兼容，否则项目在IE中无法打开，空白，也报一些未定义什么的错误。
在这里插入图片描述
这时候就需要兼容ie，将es6转为es5后使用

1、安装依赖

npm install babel-polyfill es6-promise -s

2、在main.js首行引入

import 'babel-polyfill'
import promise from 'es6-promise'
promise.polyfill()

3、在babel.config.js修改presets，内容如下：

presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry',
        polyfills: ['es6.promise', 'es6.symbol']
      }
    ]
  ],

4、在package.json最后加上；或者.browserslistrc文件not内容改为ie<10

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie<10"
  ]

5、在vue.config.js中添加配置

在module.exports 外面加上


```javascript
var path = require('path')
function resolve (dir) {
    return path.join(__dirname, '..', dir)
}

在module.exports 里面加入配置

transpileDependencies: [
        /node_modules/
],    
chainWebpack(config){
        config.entry.app = ["babel-polyfill","./src/main.js"];
        config.module.rule('compile')
        .test(/\.js$/)
        .include
        .add(resolve('src'))
        .add(resolve('test'))
        .add(resolve('node_modules/webpack-dev-server/client'))
        .add(resolve('node_modules'))
        .end()
        .use('babel')
        .loader('babel-loader')
        .options({
            presets:[
                ['@babel/preset-env',{
                    modules:false
                }]
            ]
        })
   },