Vue3项目二级目录部署

最新推荐文章于 2024-07-18 11:57:09 发布

原创最新推荐文章于 2024-07-18 11:57:09 发布 · 2.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue 专栏收录该内容

5 篇文章

订阅专栏

文章介绍了在需要在同一域名或端口下部署多个前端项目时，如何配置Vue项目的二级目录以及调整Nginx配置。关键步骤包括在.env.production中设置VITE_BASE_URL，修改routes.ts中的createWebHistory，和调整nginx.conf的location规则。完成这些配置后，前端项目能够在二级目录下正常运行。

文章目录

需求描述

有时候需要在同一域名或同一端口下，部署多个前端项目，这时候只有一个根目录就不能满足需求了，需要配置二级目录。除了在Nginx配置文件中配置二级目录外，另外还需要在Vue项目中添加一些配置。

具体配置

.env.production

# VITE_BASE_URL=/ # 默认配置
VITE_BASE_URL=/gis/  # 二级目录部署时用到

routes.ts

export const router = createRouter({
  // history: createWebHistory(), // 默认配置
  history: createWebHistory("/gis/"), // 二级目录部署时用到，https://www.dianjilingqu.com/365908.html
  routes
})

进行上述修改后，执行npm run build会发现生成的dist文件夹下第一级目录是上面配的路径，也就是gis。

nginx.conf

        location /gis {
            alias   D:/Code/smartcity-web/dist/gis/;
			try_files $uri $uri/ /hmanage/index.html;
            index  index.html index.htm;
        }