Альтернатива для "component: () => import" в маршрутизации VueJs - PullRequest
Новая
       17

Альтернатива для "component: () => import" в маршрутизации VueJs

0 голосов
/ 28 мая 2019

Я скачал шаблон онлайн, чтобы лучше понять VueJs, а также создать веб-приложение.Однако у меня есть проблема с маршрутизацией.В index.js моего роутера есть функция, которая импортирует путь.Синтаксис импорта кажется некорректным из-за некоторых проблем с веб-пакетами.Я пробовал много разных вещей, но не смог исправить ошибку, поэтому я хочу найти обходной путь для этого import синтаксиса

Это мой код для index.js маршрутизатора 

import Vue from 'vue'
import VueAnalytics from 'vue-analytics'
import Router from 'vue-router'
import Meta from 'vue-meta'

// Routes
import paths from './paths'
// import views from './views'

function route (path, view, name) {
  return {
    name: name || view,
    path,
    component: () => import(
      `../views/${view}.vue`
    )
  }
}

Vue.use(Router)

// Create a new router
const router = new Router({
  mode: 'history',
  routes: paths.map(path => route(path.path, path.view, path.name)).concat([
    { path: '*', redirect: '/home' }
  ]),
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    }
    if (to.hash) {
      return { selector: to.hash }
    }
    return { x: 0, y: 0 }
  }
})

Vue.use(Meta)

// Bootstrap Analytics
// Set in .env
// https://github.com/MatteoGabriele/vue-analytics
if (process.env.GOOGLE_ANALYTICS) {
  Vue.use(VueAnalytics, {
    id: process.env.GOOGLE_ANALYTICS,
    router,
    autoTracking: {
      page: process.env.NODE_ENV !== 'development'
    }
  })
}

export default router

Когда я пытаюсь его построить, я получаю сообщение об ошибке: 

ERROR in ./src/router/index.js
Module build failed: SyntaxError: C:/djangoProjects/martin - Copy/martin/src/router/index.js: Unexpected token (15:21)

Синтаксическая ошибка в строке (15:21), в функции route в строке component: () => import( и точно вimport.Исправление этой проблемы является проблемой, поэтому мне было интересно, есть ли обходной путь для этого без использования синтаксиса import?

1 Ответ

1 голос
/ 29 мая 2019

Если я правильно помню, вам понадобится плагин для babel, который может обрабатывать динамический импорт.

Проверить: https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import

  1. Выполнить npm install @babel/plugin-syntax-dynamic-import
  2. Создать или открыть .babelrc 
{
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}
...