Vue项目无法在IE中运行,已安装babel

发布于 2022-09-12 13:42:09 字数 2072 浏览 14 评论 0

我的项目用IE运行报错,是ie不支持es6的原因。然后我安装了babel,但是没有生效无法运行,尝试了很多方法都不行,救救孩子吧。
vue版本:2.6.1
vue cli版本:4.5.6

IE控制台
image.png
image.png

babel.config.js文件:

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry'
      }
    ],
  ],
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true
      },
      'vant'
    ]
  ]
};

.browserslistrc文件:

> 1%
last 2 versions
IE 11

package.json文件:

{
  "name": "goodsmanagerapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "axios": "^0.20.0",
    "core-js": "^3.8.1",
    "vant": "^2.10.8",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/plugin-transform-arrow-functions": "^7.12.1",
    "@babel/preset-env": "^7.12.10",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-plugin-import": "^1.13.0",
    "css-loader": "^4.3.0",
    "es6-promise": "^4.2.8",
    "vue-template-compiler": "^2.6.11"
  }
}

vue.config.js文件:

module.exports = {
  runtimeCompiler: true,
  publicPath: '/Content/app',
  devServer: {
    disableHostCheck: true
  }, css: {
    extract: false,
    sourceMap: true
  },
  transpileDependencies: ['*'],
  chainWebpack: config => {
    config.entry('main').add('@babel/polyfill');
  }
}

main.js :引入了babel

import '@babel/polyfill';
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()
import 'core-js/stable'; import 'regenerator-runtime/runtime';
.....

更新:现在没有报错但是仍然白屏,更诡异的是ie9可以运行,10和11不可以

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

柒七 2022-09-19 13:42:09

上面es6-promise是比较旧的,可以试下babel-polyfill

// vue.config.js
chainWebpack: (config) => {
  // 在chainWebpack中添加下面的代码
  config.entry('main').add('babel-polyfill'); // main是入口js文件
},
oО清风挽发oО 2022-09-19 13:42:09

.browserslistrc 改成这个试试

> 1% 
last 2 versions
not ie < 11
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文