0

我正在寫在Laravel 5.4和Vue的2 +紗 我得到的IE錯誤以下JS錯誤的一個項目不工作(版本9-11)Vue公司2.X + Laravel 5.4在資源管理器

  1. 語法錯誤(行,其中有在常量和箭頭功能的使用)
  2. 對象不支持屬性或方法「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" 
    } 
} 
+0

我使用IE和AFAIK的Vue應用程序,Vue只需要Promises填充。但是如果您使用箭頭功能,請確保您使用正確的babel設置。我認爲你需要babel-preset-es2015 - 即。 – WaldemarIce

+0

['startsWith'](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith)在IE中不可用,您需要對它進行填充。 Transpiling不會自動填充缺少的函數,只爲您翻譯語法。 – apokryfos

回答

0

我成功化解問題通過運行babel代碼,將結果回顯到特定位置:

我的.bashrc:

{ 
    "presets": ["es2015"] 
} 

命令:

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

然後在佈局文件,我包括公共/ JS/out.js文件,而不是公共/ JS/app.js