Vue Router 似乎不喜欢函数调用答案

【问题标题】：Vue Router doesn't seem to like function callsVue Router 似乎不喜欢函数调用
【发布时间】：2021-05-18 12:58:00
【问题描述】：

在我的router/index.js 中，我正在尝试延迟加载路线。如果我对它正在工作的字符串进行硬编码，但如果我使用函数（如图所示）调用将该文件路径作为字符串值获取，它会在控制台中显示一个错误 - 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

【问题讨论】：

标签： javascript vue.js vuejs2 vue-router

【解决方案1】：

如果你想延迟加载一个路由，它必须是静态可分析的，像这样：

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

在你的另一次尝试中：

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

构建工具（可能是 webpack）无法静态分析导入。构建工具负责识别哪些代码正在被使用，哪些代码没有被使用（这称为 tree-shaking）。由于它无法解析实际的导入（因为filePath 可以返回任何内容，所以只能在运行时进行），它认为 vue 文件永远不会被引用，应该从构建中删除。

如果您的实际构建工具是 webpack，则必须遵循此处描述的 webpack 说明：https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import 声明当它们具有静态可分析模式（例如：模板文字）时可以进行动态导入

【讨论】：

【解决方案2】：

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

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


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

【讨论】：

好的，但它为什么要这么做？