Question

我所有的vue组件都无法在IE11中呈现。搜索后，看来原因是IE不支持ES6及更高版本。

所以我目前的尝试是使用babel：

我的 babelrc ：

{
"presets": [
    [
        "@babel/preset-env",
        {
            "debug": true,
            "modules": false,
            "forceAllTransforms": true,
            "useBuiltIns": "usage",
            "targets": "last 1 version, > 1%",
            "corejs": 3
        }
    ]
  ]
}

我正在使用laravel-mix来编译资产：

const mix = require("laravel-mix")

mix.js("resources/js/app.js", "public/js/app.js")
.sass("resources/sass/app.scss", "public/css/app.css")
.options({
    processCssUrls: false
});

编译运行正常，但我的vue组件仍未呈现。

有解决问题的指针吗？

谢谢。

// 解决方案：Convert ES6 to ES2015 using babel and laravel-mix

Answer 1

尝试一下。

安装babel polyfill

npm install --save @babel/polyfill or yarn add @babel/polyfill

将代码导入@babel/polyfill添加到src/main.js。

import '@babel/polyfill'
import Vue from 'vue'
// ...

按如下所示更改babel.config.js：

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

创建vue.config.js文件并创建：（如果现有设置已经存在，请添加它们。）

const ansiRegex = require('ansi-regex')

module.exports = {
    ......(기존 설정이 있다면 다음에 추가)
    transpileDependencies: [ansiRegex]
}

注意。使用承诺模式时，请使用es6-promise。

Vue组件未出现在IE11（Laravel）上

1 个答案: