记一次vue-cli4.x打包兼容ie

背景:

需求就是要兼容万恶的IE浏览器

首先, 看看官方文档vue-cli

一个默认的 Vue CLI 项目会使用 @vue/babel-preset-app，它通过 @babel/preset-env 和 browserslist 配置来决定项目需要的 polyfill.

• 按照官方指示, 在babel.config.js上加上设置(忽略下面jsx的配置).

// babel.config.js
module.exports = {
  presets: [
    [
      '@vue/app',
      {
        targets: {
          browsers: ['ie >= 7', 'safari >= 7']
        },
        useBuiltIns: 'entry',
        polyfills: ['es6.promise', 'es6.symbol']
      }
    ],
    // '@vue/babel-preset-jsx'
  ],
  // plugins: ['@babel/plugin-syntax-jsx']
}

• 然后去掉 package.json 去掉 browserslist选项里的 not dead

可以通过指令 npx browserslist 查看

配置之后发现还是不得行, 有些奇怪的文件报错, 检查一番之后, 发现是因为用的一些插件和库不支持, 于是配上vue.config.js中的 transpileDependencies

默认情况下 babel-loader 会忽略所有 node_modules 中的文件. 启用本选项，用以对第三方依赖进行转译. 列出需要转译的第三方包包名或正则表达式即可.

详见官方文档链接

// vue.config.js 
transpileDependencies: [
    "vue-lazyload",
    "swiper",
    "dom7",
    "ssr-window"
  ]

然后打包发测试, 好像可以了, 收工.