开发和生产中的 Vue 子域

Question

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

src/brands
src/admin
src/home

brands&admin是一个纯vue项目，home是一个nuxt项目。我试图让品牌和管理项目在他们自己的子域（分别为 brands.website.com 和 admin.website.com 上运行和主域上的主页。到 production/staging 的部署是通过 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 开发服务器在相应的子域+端口为每个项目提供服务。

src/brands: https://brands.website.localhost:8080
src/admin: https://admin.website.localhost:8081
src/home: https://website.localhost:8082

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

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

开发和生产中的 Vue 子域

Vue subdomain in development & production

subdomain

configuration

docker

vue.js

devops