使用语法动态导入的Vue-Router + webpack +延迟加载并不起作用

时间:2017-03-29 14:30:04

标签: webpack vue-router

你可以帮我弄清楚我做错了什么。如果我使用以下语法导入

#!/bin/bash
echo -e "Hello, "$USER".\nWelcome to the BICE build script!\nVersion 0.1"
echo -e "Which build option do you wish to use?\n1. Frontend (default)\n2. Backend\n3. Database\n4. Production"
echo -n "Enter your choice [1-4] or press [ENTER]:"
read choice
if [ $choice == 1 ]; then
  echo "Option 1 selected"
  cd ./angular
  ng serve
  cd ..
fi

我收到以下错误:

const Home = (resolve) => import('./views/Home.vue').then(resolve)

如果我使用标准导入来自' ./ views / Home.vue'我没有收到任何错误,一切都按预期工作。

我已将[Vue warn]: Failed to mount component: template or render function not defined. (found in anonymous component - use the "name" option for better debugging messages.) 插件添加到.babelrc

这是我的webpack-config以防万一:

syntax-dynamic-import

此处的语法不起作用

https://router.vuejs.org/en/advanced/lazy-loading.html

2 个答案:

答案 0 :(得分:0)

如果我正确理解了你问题的背景:你需要让vue-router担心解决这个问题。如果你和vue webpack打球,我不知道为什么vue-router doc示例不起作用。

在上面的示例中,您似乎正在尝试尽早解决承诺。请记住,承诺的执行上下文发生在内部 then回调中。 vue-router docs建议:

const Foo = () => import('./Foo.vue')
点击'/ foo'路径时将解析

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

作为一个额外的步骤,由于我们在这里动态工作,为什么还要编写大量的动态导入,并一次一个地将它们精心地分配给路由器呢?我们可以通过将动态路由导入分离到单独的文件*

来创建非常易读且易于维护的东西

假设您正在使用vue webpack init提供的样板工作,请在'@ / router / index.js'附近创建一个routes.js文件,类似于以下内容:

export const MainMenu = {
 'Foo': () => import('@/components/Foo.vue'),
 'Bar': () => import('@/components/Bar.vue')
}

然后,在'@ / router / index.js'中:

import _ from 'lodash' // used for brevity in this instance; feel free to use something else.

import HelloWorld from '@/components/HelloWorld' // static import index component
import {MainMenu} from './routes'

export default new Router({
  routes: _.concat(
    [{
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }],
    Object.keys(MainMenu).map((route) => {
      return {
        name: route,
        path: `/${_.kebabCase(route)}`,
        component: MainMenu[route]
      }
    })
  )
})

就是这样,MainMenu导出中的所有路由都为您处理了!

*接受@KieranGrosvenor在他们关于大块问题的帖子下可能提出的警告;我还没有遇到这个问题,但需要注意的是。

答案 1 :(得分:-1)

像这样

const Login = () => import("../views/Login/Login.vue");