vue+vite+nginx 前端项目部署在同一端口的不同路径

reembarkation

已于 2023-10-10 16:19:33 修改

阅读量399

点赞数

文章标签：前端 vue.js nginx

于 2023-10-10 16:18:15 首次发布

本文链接：https://blog.csdn.net/reembarkation/article/details/133749522

版权

本文介绍了如何将一个任务管理前端项目和一个需要特殊发布路径的编辑器项目部署到同一IP端口，通过Vite.config.ts设置发布路径，并在nginx中进行相应的路径配置以确保两者协调工作。

摘要由CSDN通过智能技术生成

现有两个项目，一个是任务管理的前端项目，另一个是编辑器的前端项目。现在想将两个项目部署在同一个IP端口下，具体实现如下：

1.任务管理项目为主目录，不需要特别注意；比如: xxx:8099

2.编辑器项目是要部署在 xxx:8099/editor 下，需要特殊注意下发布的路径：

在vite.config.ts 中加入：

export default defineConfig({
    ...
    base:'/editor' // 发布的路径
})

3.注意nginx的配置

       location / {
            root   html/task;
            index  index.html index.htm;
        }
        
         location /editor {
	     # 注意这里只能使用 alias
            alias  html/editor;
            index  index.html index.htm;
        }

注意：editor的发布的路径和nginx中部署的路径要一致。

这样就能将两个项目部署在同一端口下了。