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

Question

您好，我有一个名为 Home 的应用程序，它具有可安装的插件，我可以在 iframe

中的运行的任何时间安装这些插件

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

使用此 nginx 设置，我可以在构建后加载插件应用程序 (Bed)（这非常耗时）

这里是 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 应用程序，但是第二个app i,e plugin i will always build which will be available as bundle.在构建 both(i,e npm 运行 build, bundle) 之后使用上面的 nginx 设置它会工作正常。我想避免构建主应用程序。

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

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

仍在寻找解决方案..

请帮助我提前谢谢！！

Answer 1

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

Webpack DevServer 基于Express framework and allows to setup custom Express middleware using devServer.before 选项

通过这种方式，您可以配置任何路径来提供几乎任何您想要的服务。例如使用 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'));
    }
  }
};

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

How to load multiple apps with vue devServer configuration

devserver

webpack

vue.js

webpack-dev-server

vue-cli