Question

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

#!/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)

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

我已将[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

Answer 1

如果我正确理解了你问题的背景：你需要让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在他们关于大块问题的帖子下可能提出的警告;我还没有遇到这个问题，但需要注意的是。

Answer 2

像这样

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

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

2 个答案: