vueCli3兼容IE10配置

1.安装

npm install babel-polyfill --save
npm install es6-promise --save
npm install url-search-params-polyfill --save

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

import "babel-polyfill";
import "url-search-params-polyfill";
import Es6Promise from "es6-promise";
Es6Promise.polyfill();

3.package.json配置browserslist

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

4.postcss.config.js配置

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions", // 所有主流浏览器最近10版本用
      ],
    },
  },
};

5.babel.config.js配置

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

6.配置vue.config.js

module.exports = {
  transpileDependencies: ["*"],//配置依赖转化，可定制配置
  chainWebpack: (config) => {
    config.entry.app = ["babel-polyfill", "./src/main.js"];
  }
};

 

7.兼容css var()变量

// 安装依赖
npm install css-vars-ponyfill --save

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

有问题请指教补充改正。