开发和生产中的 Vue 子域答案

【问题标题】：Vue subdomain in development & production开发和生产中的 Vue 子域
【发布时间】：2019-01-06 15:11:12
【问题描述】：

我有以下（抽象的）项目结构：

来源/品牌
src/管理员
src/home

Brands & admin 是一个纯 vue 项目，home 是一个 nuxt 项目。我正在尝试让品牌和管理项目在他们自己的子域（分别为brands.website.com 和admin.website.com）上运行，并在主域上运行。部署到生产/登台是通过 docker（带有 nginx 映像）进行的，我想只是将 nginx 配置文件从我的项目复制到 docker 映像，以将 dist 文件夹中的文件指向正确的 html 文件（不确定但是，我需要先研究一下）。

为了开发，我使用了 vue.config.js（因为我使用的是 vue cli 的 v3）并且我已经设置了以下内容：

index: {
  entry: 'src/index/main.js',
  filename: 'index.html',
},
brands: {
  entry: 'src/brands/main.js',
  filename: 'brands/index.html',
},
admin: {
  entry: 'src/admin/main.js',
  filename: 'admin/index.html',
},

我可以通过 localhost:8080/brands 访问品牌模块，通过 localhost:8080/admin 访问管理模块，通过 localhost:8080 访问主页，但问题是在我的索引页面上，我将有一条路线/brands，所以这可能会用来自 nuxt 的页面覆盖品牌模块路由（反之亦然）。现在我的问题是是否有更好的方法来执行此操作（例如，在 vue / localhost 中启用子域），如果没有，我想将 nginx 配置复制到我的 docker 映像的方式是一个好习惯吗？还是不行？

提前致谢！

【问题讨论】：

为了一个干净、可维护和可扩展的架构，每个应用程序都必须有自己的源存储库、服务器和域。为什么你所有的应用程序都在一个 src 中？如果你拆分它们，一个简单的 nginx 配置就足以发布你的三个域
我知道，我们目前有 5 个服务，每个服务都位于自己的存储库中，但是对于前端，我们想使用 1 个存储库，并且在生产/登台上我可以使用我在 nginx conf 中描述的方法，但我不确定如何在 localhost 的开发中使用它。
能否请您发布解决子域问题的 vue.config.js 文件的配置？
自从我们切换到 nuxt 并且子域不再存在后，我不再有这种情况了。对不起！

标签： docker vue.js configuration subdomain devops

【解决方案1】：

我有一个类似的项目架构。我有一个包含多个 vue/nuxt 项目的仓库。我的每个项目都是自己的 npm/webpack 项目，在本地开发时通过子域访问。

根据您的示例，这就是我设置项目的方式。

修改你的主机文件：

127.0.0.1 website.localhost brands.website.localhost admin.website.localhost

使用localhost 作为 TLD 是我个人的决定，您可以随意命名域。

配置 webpack 开发服务器以在相应的子域 + 端口为每个项目提供服务。

src/品牌：https://brands.website.localhost:8080
src/admin:https://admin.website.localhost:8081
src/主页：https://website.localhost:8082

此配置的好处在于您的开发 URL 与您的生产 URL 匹配。 https://brands.website.localhost:8080 -> https://brands.website.com

每个项目都可以完全控制域的子路径，并且不会破坏其他项目的路由，就像您在 /brands 路由中提到的那样。

【讨论】：