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