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"
}
}
答
我成功化解问题通过运行babel代码,将结果回显到特定位置:
我的.bashrc:
{
"presets": ["es2015"]
}
命令:
./node_modules/.bin/babel public/js/app.js > public/js/out.js
然后在布局文件,我包括公共/ JS/out.js文件,而不是公共/ JS/app.js
我使用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