Vue+Express一体化插件系统架构搭建及.vue组件导入问题咨询

问题根因 #

你的报错核心是webpack动态导入的规则限制：纯运行时传入的完整文件路径无法被webpack识别，构建阶段没有将外部.vue文件纳入编译流程，运行时自然找不到对应模块。

本地开发阶段修复方案 #

1. 调整环境变量存储逻辑 #

不要在环境变量里存文件全路径，只存插件相对于公共目录的标识：

// vue.config.js
const path = require('path')
const fs = require('fs')
const pluginRoot = path.resolve(__dirname, 'src-backend/plugins')
// 读取插件列表时只存插件名，不要存全路径
const plugins = fs.readdirSync(pluginRoot).map(pluginDir => ({
  name: pluginDir,
  component: `${pluginDir}/${pluginDir}.vue`
}))
process.env.VUE_APP_PLUGINS = JSON.stringify(plugins)

2. 修正路由动态导入写法 #

webpack要求动态导入必须包含静态路径前缀，才能在构建阶段扫描对应目录下的所有文件纳入打包范围：

// router.js
JSON.parse(process.env.VUE_APP_PLUGINS).forEach(plugin => {
  routes.push({
    name: plugin.name,
    path: `/plugins/${plugin.name}`,
    // @plugins/ 前缀必须写死，不能完全用变量替代
    component: () => import(`@plugins/${plugin.component}`)
  })
})

3. 补充Vue CLI编译范围配置 #

Vue CLI默认只会编译前端src目录下的文件，你需要把后端插件目录加入vue-loader的编译范围：

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@plugins': path.resolve(__dirname, 'src-backend/plugins')
      },
      extensions: ['.vue', '.js', '.json']
    }
  },
  chainWebpack: config => {
    // 把插件目录加入vue-loader的处理范围
    config.module.rule('vue').include.add(path.resolve(__dirname, 'src-backend/plugins'))
  }
}

适配后续NPM插件发布的架构建议 #

你当前的架构已经满足插件发版的基础要求，只需要做少量对齐即可：

• 每个独立插件的package.json分别声明后端入口（给Express加载API路由）和前端组件导出路径
• 后续插件发布后，只需要把@plugins的别名指向node_modules下的插件安装目录，前端路由逻辑完全不需要修改
• 建议插件发版前提前预编译.vue单文件组件为普通js和css，不需要宿主项目额外配置编译规则，兼容性更好

内容的提问来源于stack exchange，提问作者bazaars