Vue3项目二级目录部署

需求描述

有时候需要在同一域名或同一端口下，部署多个前端项目，这时候只有一个根目录就不能满足需求了，需要配置二级目录。除了在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;
        }

参考链接

• Vue 3使用二级目录部署(Nginx)