vue-cli3.x项目兼容ie解决方案

# 1、安装以下npm包

npm install --save babel-polyfill
npm install es6-promise --save

1
2

# 2、在main.js中引用

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

1
2
3

# 3、在vue.config.js里插入代码

没有就新建（和package.json同级）

module.exports = {
  //第三方 iview
  chainWebpack: config => {
      config.module
        .rule('iview') 
        .test(/iview.src.*?js$/)
        .use('babel')
          .loader('babel-loader')
          .end()
          
      //或者
     config.module.rule('iview') //view-design
        .test(/\.js$/)
        .use('babel')
        .loader('babel-loader')
        .end()
   },
   
   //第三方 elementUI
   config.module.rule("elementUI").test(/\.js$/)
      .include
      .add(path.resolve('src'))
      .add(path.resolve('test'))
      .add(path.resolve('./node_modules/element-ui/src'))
      .add(path.resolve('./node_modules/element-ui/packages'))
      .end().use("babel-loader").loader("babel-loader").end();

   // 解决npm run serve某些node_modules依赖不能被babel编译问题
   transpileDependencies: process.env.NODE_ENV === "development" ? ["*"] : [],

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 4、在babel.config.js里插入代码

和vue.config.js同级

module.exports = {
   presets: [
    [
      '@vue/cli-plugin-babel/preset',  //"@vue/app",
      {
        "useBuiltIns": "entry",
        polyfills: [
          'es6.promise',
          'es6.symbol'
        ]
      }
    ]
  ],
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 5、在package.json里

 "browserslist": [
    "> 1%",
    "ie 10"
  ]

1
2
3
4

然后重新启动项目即可。

#Vue

上次更新: 2024/01/30, 00:35:17

← vue-cli3.0移动端项目将px转换成rem vue-router传递参数的几种方式→