Vue Router似乎不喜欢函数调用

Question

在我的router/index.js中，我正在尝试延迟加载路由。如果我对字符串进行硬编码，它是有效的，但是如果我使用函数调用(如图所示)将文件路径作为字符串值，它会在console - Error: Cannot find module '../views/Login/Login.vue'中显示一个错误。我使用的是Vue 2.6.11和Vue-router 3.5.1。

我哪里错了？

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// const filePath = (filename, foldername) => '../views/' + foldername + "/" + filename + '.vue'


const routes = [
    {
        path: '/',
        name: 'Login',

        // THIS WORKS
        component: () => import('../views/Login/Login.vue')

        // THIS DOES NOT, EVEN THOUGH IT IS GETTING THE EXACT SAME VALUE
        // component: () => import(filePath('Login', 'Login'))
    },
]

const router = new VueRouter({
    routes
})

export default router

Answer 1

如果你想延迟加载一条路由，它必须是可静态分析的，如下所示：

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

在您的其他尝试中：

component: () => import(filePath('Login', 'Login'))

导入不能由构建工具(可能是webpack)静态分析。构建工具负责识别正在使用的代码和未使用的代码(这称为树摇动)。由于它不能解析实际的导入(只有在运行时才有可能，因为filePath可以返回任何内容)，所以它认为vue文件从未被引用过，应该从构建中删除。

如果你的实际构建工具是webpack，你必须遵循这里描述的webpack的说明：https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import，它指出当动态导入具有可静态分析的模式(例如:模板文字)时，动态导入是可能的。

Answer 2

您应该让webpack知道它将在哪个根文件夹中加载组件文件，因此您应该将../views/移到导入参数，而不是您函数的返回值：

const filePath = (filename, foldername) => foldername + "/" + filename + '.vue'


const routes = [
    {
        path: '/',
        name: 'Login',
        component: () => import('.../views/'+filePath('Login', 'Login'))
    },
]