如何使用 vue devServer 配置加载多个应用程序答案

【问题标题】：How to load multiple apps with vue devServer configuration如何使用 vue devServer 配置加载多个应用程序
【发布时间】：2022-01-11 05:55:49
【问题描述】：

您好，我有一个名为 Home 的应用程序，它具有可安装的插件，我可以在任何时间点安装这些插件，这些插件在 iframe 中运行

<Home /home/user/mainprojects/index.html> <-- Home app
   <Bed iframe /home/user/plugins/bed/index.html> <-- plugins app
   <Bed /iframe>
</Home>

有了这个nginx 设置，我可以在构建后加载插件应用程序（床）（这非常耗时）

这里是 nginx 设置

     location / {
             alias /home/user/mainprojects/dist/;
             index index.html;
     }


  location /Bed {
      alias    /home/user/plugins/bed/dist/;
      index  index.html index.htm;
  }

问题：我不想构建主应用程序Home 应用程序我想通过serve 运行它，但我将始终构建第二个应用程序，即插件可用作为捆绑。在构建两者之后使用上述nginx 设置（即npm run build，bundle）它会正常工作。我想避免构建主应用程序。

这是我的vue.config.js 的样子

module.exports = {
    devServer:{
        proxy:{
            '^/appReplacer':{
                 target: 'http://100.148.1.9:9003/',
                 changeOrigin:true,
                 logLevel:'debug',
                 pathRewrite: {'^/appReplacer':'/'}
            }
        }
    }
}

仍在寻找解决方案..

请帮助我提前谢谢！

【问题讨论】：

您应该在 DEV 模式下运行第二个应用程序 - 在地址 100.148.1.9 上侦听端口 9003，因此第一个应用程序将能够将您的请求代理到第二个应用程序。
@IVOGELOV，nginx 我也可以通过运行它来加载第二个应用程序（构建后）
您说您正在寻找没有nginX 的解决方案，因为您想避免捆绑 - 因此您需要在两个应用程序的项目文件夹中运行npm run serve。
@IVO GELOV，抱歉不清楚，我的第二个应用程序将始终作为捆绑包提供，但我的第一个应用程序将始终通过 npm run serve
如果您的应用始终以捆绑包形式提供 - 您将永远无法在此捆绑包上使用 npm run serve。该捆绑包必须通过nginX 或类似的HTTP 服务器提供。 npm run serve 只能处理原始未捆绑的源代码。

标签： vue.js webpack webpack-dev-server vue-cli devserver

【解决方案1】：

假设您使用的是基于 Webpack 4 的 Vue CLI v4

Webpack DevServer 基于 Express 框架，允许使用 devServer.before 选项设置自定义 Express 中间件

通过这种方式，您可以配置任何路径来提供几乎任何您想要的服务。例如使用static middleware 来提供一些静态文件（在这种情况下是你的插件的dist）

请注意，以下代码很大程度上取决于使用的 Vue CLI 版本。 Vue CLI 4.5.15 的当前发布版本使用 "webpack-dev-server": "^3.11.0"，它使用 "express": "^4.17.1"

// vue.config.js

// express should be installed as it is used by webpack-dev-server
const express = require('express');

module.exports = {
  //...
  devServer: {
    before: function(app, server, compiler) {
      app.use('/url/to/plugin', express.static('dist/location/of/your/plugin'));
    }
  }
};

【讨论】：