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在資源管理器

回答

相關問題