Маршрутизатор Vue-не может ленивый компонент загрузки-неожиданный токен

Я пытаюсь ленивый нагрузки компонент входа для моего маршрута входа в систему. При создании webpack я получаю:

SyntaxError: Unexpected Token

Логин.компонент vue отлично работает, если я импортирую и назначаю его так же, как и домашний маршрут.

я озадачен, потому что я считаю, что этот код должен работать на основе этот блог.

строка, которая терпит неудачу ниже есть:

component: () => import('../components/Login.vue'),

маршрутизатор.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home.vue'


Vue.use(VueRouter)


export default new VueRouter({
    mode: 'history',

    routes: [
        {
            path: '/',
            name: 'home',
            component: Home,
            meta: {
                permission: "anonymous",
            },
        },

        {
            path: '/login/',
            name: 'login',
            component: () => import('../components/Login.vue'),
            meta: {
                permission: "anonymous",
            },
        },
    ],
})

пакета.в JSON

"dependencies": {
    "vue": "^2.3.4"
},
"devDependencies": {
    "babel-core": "^6.25.0",
    "babel-eslint": "^7.2.2",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.22.0",
    "cross-env": "^3.0.0",
    "css-loader": "^0.26.4",
    "eslint": "^3.12.2",
    "eslint-config-standard": "^6.2.1",
    "eslint-friendly-formatter": "^2.0.5",
    "eslint-loader": "^1.5.0",
    "eslint-plugin-html": "^1.7.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^2.0.1",
    "file-loader": "^0.9.0",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",
    "style-loader": "^0.18.2",
    "uiv": "^0.11.4",
    "vee-validate": "^2.0.0-rc.7",
    "vue-acl": "^2.1.10",
    "vue-js-cookie": "^2.0.0",
    "vue-loader": "^13.0.2",
    "vue-quill-editor": "^2.2.4",
    "vue-resource": "^1.3.4",
    "vue-router": "^2.7.0",
    "vue-template-compiler": "^2.1.0",
    "vuex": "^2.3.1",
    "webpack": "^2.7.0",
    "webpack-bundle-tracker": "^0.2.0",
    "webpack-dev-server": "^2.5.1"
}

скриншот ошибки компиляции

Screenshot of error during compilation

7
ecmascript-6 vue-component vue-router vue.js webpack

3 ответов

ваш webpack не настроен спецификации! Да есть два способа решить вашу проблему!

первое-это изменить все происходящее import('path/to/component.vue') to System.import('path/to/component.vue')

и второй использует BABEL с folowing конфигурацией

.babelrc

{
  "presets": [
    ["es2015", { "modules": false }],
    "stage-2"
  ],
  "plugins": [
    "transform-export-extensions"
  ]
}

ресурсы

модули ES6

Динамический Импорт

Этап - 2 Вавилон Предустановка

5

С этими версиями зависимостей можно использовать следующее решение:

"laravel-mix": "^2.1.11", 
"vue-router": "^3.0.1",

component: (resolve) => { require(['../components/' + nameComponent + '.vue'], resolve); }
1

ты вю-webpack шаблон чтобы начать свой проект и использовать Стандартный Стиль JavaScript в корпит он? если вы, просто обновите свой package.json в том числе:

"standard": {
    "parser": "babel-eslint",
    "ignore": [
        "build"
    ]
}

это проигнорирует любое предупреждение об ошибке Unexpected token import в текстовом редакторе.

0