node.js - node require 一个动态模块出错

Question

由于一个vue项目客户需求,要把原来的后台的单模版改成类似前台的多模板形式,因为前台页面我用的PHP做的多模板，所以实现比较容易，但是在vue中没有找到类似功能的Node模块,所以打算自己搞一下,后端使用的是laravel框架,也就顺带用他自带的laravel mix,但是不知道为什么在require一个变量路径的vue组件是出现了各种错误,哪位知道如何解决吗？先谢啦

我在vue-router里这样调用

export default {
    path: '',
    component: require('../../../tool').view('DashBoard.vue'),
    name: 'dashboard'
}

require 一个视图变量 './template/default/views/' + $view 运行正确
当然,我们的default是个变量,所以就开始出错了

view: function($view) {
    let $template = 'default';
    return require('./template/default/views/' + $view);
}

require 一个路径,使用 $template作为模板变量
./template/' + $template + '/views/' + $view 运行npm run dev就出错

view: function($view) {
    let $template = 'default';
    return require('./template/' + $template + '/views/' + $view);
}

require 一个路径,使用视图路径做变量,也是出错,编译命令npm run dev 运行正确,运行程序出错
app.js:12 Uncaught Error: Cannot find module "."

module.exports = {
    view: function($view) {
        let $template = './template/default/views/';
        return require($template + $view);
    }
};

请问该如何解决这个问题呢？谢谢...

Answer 1

Webpack은 모듈을 로드하고 패키징하기 위한 종속성을 결정해야 하므로 node.js와 같은 동적 경로를 요구할 수 없습니다.
1. 스위치를 폭력적으로 사용하여 변수를 일정하게 만듭니다

2. 컨텍스트 설정

참고https://segmentfault.com/q/10...

3. 또는 동적 로딩 구성요소 메커니즘을 사용하세요

Webpack은 비동기식 모듈 로딩을 지원합니다

으아악

vue 공식 문서 보기