Vue CLI 3 配置兼容IE10

发表于 | 分类于
Vue CLI 3 配置兼容IE10

VueCLI3配置兼容IE10

JS兼容

配置兼容列表

如果生效后面的就可以不用配置了

package.json配置browserslist

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

或者

单独的文件.browserslistrc

1
2
3
> 1%
last 3 versions
not ie <= 10

配置vue.config.js

transpileDependencies

  • transpileDependencies为false：则原封不动的打包进bundle

  • transpileDependencies为true：根据browserslist情况决定是否需要打polyfill

具体配置

1
2
3
4
5
6
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  publicPath: "./",
});

兼容库

作用

  • babel-polyfill（解决浏览器不支持es6的问题）原理就是把es6的语法转换成es5的语法

  • es6-promise(解决不支持promise的问题）

1.安装

1
2
3
4
5
npm install babel-polyfill --save
npm install es6-promise --save

# 非必要
npm install url-search-params-polyfill --save

2.在main.js文件最上面加

1
2
3
4
5
6
import "babel-polyfill";
import Es6Promise from "es6-promise";
Es6Promise.polyfill();

// 非必要
import "url-search-params-polyfill";

3.babel.config.js配置

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
  presets: [
    [
      "@vue/cli-plugin-babel/preset",
      {
        useBuiltIns: "entry",
        polyfills: ["es6.promise", "es6.symbol"],
      },
    ],
  ],
};

CSS兼容

postcss.config.js配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions", // 所有主流浏览器最近10版本用
      ],
    },
  },
};

兼容css var()变量

1
2
3
4
5
6
// 安装依赖
npm install css-vars-ponyfill --save

// 在main.js文件加入
import cssVars from "css-vars-ponyfill";
cssVars({});

兼容函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
String.prototype.replaceAll = function(s1,s2){
  return this.replace(new RegExp(s1,'gm'),s2)
}

Array.prototype.forEach = Array.prototype.forEach || function (callback) {
  var isArray = Object.prototype.toString.call(this) == '[object Array]'
  if(isArray){
    for(var key in this){
      if(key != 'forEach'){
        callback.call(this[key],key,this[key],this)
      }
    }
  }else{
    throw TypeError
  }
}
1
2
3
4
5
6
7
8
9
var value = "123131";
value = value.replace(/%/g,'');
value = value.replace(/;/g,'');
value = value.replace(/>/g,'');
value = value.replace(/</g,'');
value = value.replace(/\//g,'');
value = value.replace(/\\/g,'');
value = value.replace(/`/g,'');
value = value.replace(/'/g,'');

其他环境

NodeJS

你需要在你的应用入口顶部通过 require 将 polyfill 引入进来。确保它在任何其他代码/依赖声明之前被调用！

1
require("babel/polyfill");

ES6

如果你在你的应用入口使用 ES6 的 import 语法，你需要在入口顶部通过 import 将 polyfill 引入，以确保它能够最先加载：

1
import 'babel/polyfill';

Webpack

在 webpack.config.js 中，将 babel-polyfill 加到你的 entry 数组中：

1
2
3
module.exports = {
  entry: ["babel/polyfill", "./app/js"]
};

浏览器中

可以在 babel/polyfill npm 发布版中的 dist/polyfill.js 文件中找到它。

它需要在你编译过的 Babel 代码之前被包括进去。你可以将它追加到你编译过的代码中，或者在这些代码之前通过 <script> 引入它。