Vue 2.x + Laravel 5.4 在资源管理器中不起作用

Posted 2023-02-22

【中文标题】Vue 2.x + Laravel 5.4 在资源管理器中不起作用

【英文标题】：Vue 2.x + Laravel 5.4 not working in Explorer

【发布时间】：2018-05-01 18:07:57

【问题描述】：

我正在做一个用 Laravel 5.4 和 Vue 2 + Yarn 编写的项目 我在 IE 中遇到以下 JS 错误（版本 9-11）

语法错误（在 const 和箭头函数中使用的行） 对象不支持属性或方法“startsWith”

我错过了什么？我想知道我是否在滥用 babel 或者可能缺少其他东西。我在这里完全感到沮丧，因为我已经花了很多时间来弄清楚为什么在涉及 Vue 2 组件时在 IE 中没有任何东西可以正常工作。任何帮助或建议将不胜感激！

app.js：

require('./bootstrap');

var Promise = require('es6-promise').Promise;
require('babel-polyfill')
Promise.polyfill();
window.Vue = require('vue');
import Vue2Filters from 'vue2-filters'
import BootstrapVue from 'bootstrap-vue'

我的 webpack.mix.js（试图安装 babel）

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .babel('out.es6.js', 'out.js')
    .options(
        polyfills: [
            'Promise'
    ]
);

我的 package.json

    "private": true,
    "scripts": 
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "build": "babel src -d lib"
    ,
    "devDependencies": 
        "accounting": "^0.4.1",
        "axios": "^0.15.3",
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-polyfill": "^6.26.0",
        "babel-preset-env": "^1.6.1",
        "babel-preset-vue-app": "^1.3.1",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^3.2.3",
        "jquery": "^3.1.1",
        "laravel-mix": "0.*",
        "lodash": "^4.17.4",
        "vue": "^2.4.2",
        "vue-template-compiler": "^2.4.2",
        "webpack": "^3.8.1"
    ,
    "dependencies": 
        "bootstrap-vue": "^1.0.0-beta.7",
        "es6-promise": "^4.1.1",
        "vee-validate": "^2.0.0-beta.17",
        "vue-events": "^3.0.1",
        "vue-strap": "^1.1.37",
        "vue2-filters": "^0.1.9",
        "vuelidate": "^0.5.0"
    

【问题讨论】：

我正在使用带有 IE 和 AFAIK 的 Vue 应用程序，Vue 只需要 Promises polyfill。但如果您使用箭头函数，请确保您使用的是正确的 babel 设置。我认为你需要 babel-preset-es2015-ie。

startsWith 在 IE 中不可用，您需要对其进行填充。 Transpiling 不会自动 polyfill 缺失的函数，因为你只翻译语法。

【参考方案1】：

我通过运行 babel 代码成功解决了问题，将结果回显到特定位置：

我的 .bashrc：

    "presets": ["es2015"]

命令：

./node_modules/.bin/babel public/js/app.js > public/js/out.js

然后在布局文件中我包含了 public/js/out.js 文件而不是 public/js/app.js