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一樣require一個動態路徑。
1、暴力用switch把變數常量化

2、設定context

參考 https://segmentfault.com/q/10...

3、或使用動態載入組件機制

webpack是支援非同步載入模組的

require(['./xxx.vue'], function(module){
 
});

參見vue官方文檔