vue项目兼容ie11的配置


由于下载的依赖包很多是不兼容ie的(比如箭头函数等),所以第一步就要babel把依赖的代码 编译了!!!

在src根目录vue.config.js下


module.exports = {
  // 设置编译所有node_modules下的依赖
  transpileDependencies: [/node_modules/],
  chainWebpack: config => {
    const entry = config.entry('app')
    entry
      .add('babel-polyfill')
      .end()
    entry
      .add('classlist-polyfill')
      .end()
  },
  // 可以将source-map设置一下,由不兼容可以看看源码
  configureWebpack: (config) => {
    //调试JS
    config.devtool = "source-map"
  },
  css: {
    //查看CSS属于哪个css文件
    sourceMap: true,
  },
}

在src根目录.browserslistrc下


> 1%
last 2 versions
not ie <= 8

在src根目录babel.config.js下


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

在main.js下


import 'babel-polyfill'
import 'classlist-polyfill'

在package.json下


"dependencies": {
    "babel-polyfill": "^6.26.0",
    "classlist-polyfill": "^1.2.0",
  },

如果报错:

[vuex] vuex requires a Promise polyfill in this browser.在这个浏览器中vuex需要Promise填充。

在public的index.html下


<!-- Script for polyfilling Promises on IE9 and 10 -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

posted @ 2022-06-28 14:44  吕业浩  阅读(476)  评论(0)    收藏  举报