nginx部署多个vue项目

目的，https://xxxxx.com/kpi-ui/ 和 https://xxxxx.com/engine-ui/
访问不同的vue项目

vue2

vue.config.js文件中

解释：

publicPath: process.env.NODE_ENV === "production" ? "/kpi-ui/" : "/"

route.js

解释：

export default new Router({
  mode: "history", 
  base: process.env.NODE_ENV === "production" ? "/kpi-ui/" : "/",
  routes: constantRoutes,
});

vue3

vue.config.js文件中

base: process.env.NODE_ENV === "production" ? "/kpi-ui/" : "/"

route.js

const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_BASE_PATH),
})

nginx 配置

代码目录：

• /home/kpi/ui/common
• /home/nginx/ui/common

# 打开权限
user root

# try_files 一定要是/kpi-ui/index.html，其他会拼接到nginx所在目录上
location /kpi-ui {
  alias /home/kpi/ui/common;
  index index.html;
  try_files $uri $uri/ /kpi-ui/index.html;
}

location /engine-ui {
  alias /home/engine/ui/common;
  index index.html;
  try_files $uri $uri/ /engine-ui/index.html;
}