【发布时间】：2021-07-31 16:57:01
【问题描述】：
我正在创建一个包含 Vue 组件的对象。
当我通过字符串 vs 直接作为参数需要 Vue 组件时，我遇到了问题。
// Not working
const vueComponentPath = 'C:\\Users\\username\\Desktop\\about-page.vue'
const vueComponent = require(vueComponentPath).default
componentsToMount[componentName] = vueComponent
抛出错误：
Cannot find module 'C:\Users\username\Desktop\about-page.vue'
虽然效果很好：
// Working
const vueComponent = require('C:\\Users\\username\\Desktop\\about-page.vue').default
componentsToMount[componentName] = vueComponent
我不明白为什么我的第一个示例不起作用。我需要require 来接受我的字符串路径。
我也尝试了以下方法，但都给出了相同的错误消息：
const vueComponentPath = 'C:/Users/username/Desktop/about-page.vue'
const vueComponent = require(vueComponentPath).default
componentsToMount[componentName] = vueComponent
和
const vueComponentPath = 'C:/Users/username/Desktop/about-page.vue'
const vueComponent = require(path.resolve(vueComponentPath)).default
componentsToMount[componentName] = vueComponent
【问题讨论】：
-
应该是Node支持这种动态加载，web前端最好用静态模块名写。
-
@jeremyjone 如果动态使用两者都很好。
-
我的意思是......你有特定的理由不使用 es6 导入或相对路径吗？通常你可以使用
import Component from '@/components/Component.vue'或const Component = () => import("./Component.vue") -
@ThibautMaurice 是的。基本上，这段代码将被放入一个 Vue 组件中，该组件将以编程方式加载 Markdown 文件，然后是其各自的补充 Vue 组件（如果适用）。所以像 [about-page.md + about-page.vue] 然后是另一个 md 文件：[status-page.md 但没有 vue 文件]。所以它必须以编程方式动态加载。