Question

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

src / brands
src / admin
src / home

Brands＆admin是一个纯粹的vue项目，home是一个nuxt项目。我正在尝试使brands＆admin项目在各自的子域（分别为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进入brands模块，通过localhost：8080 / admin进入admin模块，通过localhost：8080进入主页，但是问题是我的索引页面上有一条路由/ brands，这样可能会用来自nuxt的页面覆盖brands模块路由（反之亦然）。现在是我的问题，是否有更好的方法（例如在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子域的开发和生产

1 个答案: