docker - 开发和生产中的 Vue 子域

Question

我有以下(抽象)项目结构:

src/品牌

源/管理员

src/首页

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 镜像的方式是一个好习惯吗？或不？

提前致谢!

Answer 1

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

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

修改你的主机文件:
127.0.0.1 website.localhost brands.website.localhost admin.website.localhost
使用 localhost由于 TLD 是我个人的决定，因此您可以随意命名这些域。

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

来源/品牌:https://brands.website.localhost:8080

源/管理员:https://admin.website.localhost:8081

来源/主页:https://website.localhost:8082

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

每个项目都将完全控制域的子路径，并且不会破坏其他项目的路由，您在 /brands 中提到了这一点。路线。