Vue公司2.X + Laravel 5.4在资源管理器

我正在写在Laravel 5.4和Vue的2 +纱我得到的IE错误以下JS错误的一个项目不工作（版本9-11）Vue公司2.X + Laravel 5.4在资源管理器

语法错误（行，其中有在常量和箭头功能的使用）
对象不支持属性或方法“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（试图安装巴贝尔）

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" 
    } 
}

来源

2017-11-17 Yuval Kaufman

我使用IE和AFAIK的Vue应用程序，Vue只需要Promises填充。但是如果您使用箭头功能，请确保您使用正确的babel设置。我认为你需要babel-preset-es2015 - 即。 – WaldemarIce

['startsWith']（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith）在IE中不可用，您需要对它进行填充。 Transpiling不会自动填充缺少的函数，只为您翻译语法。 – apokryfos

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

我的.bashrc：

{ 
    "presets": ["es2015"] 
}

命令：

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

然后在布局文件，我包括公共/ JS/out.js文件，而不是公共/ JS/app.js

来源

2017-11-19 13:38:09

Vue公司2.X + Laravel 5.4在资源管理器

回答

相关问题