Vue 组件在 IE11 (Laravel) 上不出现

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

试试这个。

1. 安装babel polyfill

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

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

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

1. 修改babel.config.js如下：

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

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

const ansiRegex = require('ansi-regex')

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

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