Требуется компонент Vue в JS

#vue.js #electron

Вопрос:

Я создаю объект, содержащий компоненты Vue.

У меня возникают проблемы, когда мне требуется компонент Vue через строку vs непосредственно в качестве аргумента.

 // Not working
const vueComponentPath = 'C:\Users\username\Desktop\about-page.vue'
const vueComponent = require(vueComponentPath).default

componentsToMount[componentName] = vueComponent
 

Выдает ошибку:

 Cannot find module 'C:UsersusernameDesktopabout-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
 

Комментарии:

1. Это должен быть узел, поддерживающий эту динамическую загрузку, и веб-интерфейс лучше всего писать со статическими именами модулей.

2. @jeremyjone и то, и другое совершенно нормально, если их использовать динамически.

3. Я имею в виду… У вас есть конкретная причина не использовать импорт es6 или относительные пути вместо этого? Обычно вы можете просто использовать import Component from '@/components/Component.vue' или const Component = () => import("./Component.vue")

4. @Тибо Морис, да. В принципе, этот код будет помещен в компонент Vue, который будет программно загружать файлы уценки, а затем соответствующий дополнительный компонент Vue, если это применимо. Так что что-то вроде [about-page.md о-страница.vue] затем другой файл md: [status-page.md но для этого нет файла vue]. Поэтому он должен быть загружен программно, динамически.

Ответ №1:

Теперь работает нормально.

Требуется использовать относительный путь.

 const vueComponent = require('../about-page.vue').default
componentsToMount[componentName] = vueComponent