时间戳

首页 > 解决方案 > Vue 组件在 IE11 (Laravel) 上不出现

vue.js - Vue 组件在 IE11 (Laravel) 上不出现

问题描述

我所有的 vue 组件都无法在 IE11 中呈现。查了一下，貌似是IE不支持ES6及以上的原因。

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

我的 。巴别尔：

{
"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 组件仍未渲染。

任何解决问题的指针？

谢谢。

//解决方案：使用 babel 和 laravel-mix 将 ES6 转换为 ES2015

标签： vue.jsbabeljslaravel-mix

解决方案

尝试这个。

  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'
      }
    ]
  ]
}
  1. 创建 vue.config.js 文件并创建：（添加现有设置，如果它们已经存在。）
const ansiRegex = require('ansi-regex')

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

笔记。在使用es6-promise承诺模式时使用。

推荐阅读