nginx 二级目录部署vue项目

主要是vue项目得更改资源路径

通过.env环境变量来设置

修改项目的基础路径，我的是vite项目，所以我要在vite.config.js中修改base属性为 ‘/threejs/’
修改vue-router的base路径为’/threejs’

1.vite项目的基础路径

getEnvConfig 方法是封装的获取环境变量的方法，因为这个时候还无法通过 import.meta.env 来获取

。。。
import { getEnvConfig } from './build/utils'
const envConfig = getEnvConfig()
export default defineConfig({base: envConfig.VITE_GLOB_BASE_PATH,。。。
})

2. vue-router的配置内容

// 创建一个可以被 Vue 应用程序使用的路由实例
export const router = createRouter({// 创建一个 hash 历史记录。// 提供的可选 base。当应用程序被托管在诸如 https://example.com/folder/ 之类的文件夹中时非常有用。history: createWebHistory(import.meta.env.VITE_GLOB_BASE_PATH),// 应该添加到路由的初始路由列表。routes: localRouteList,// 是否应该禁止尾部斜杠。默认为假strict: true,// 页面切换时，滚动回顶部scrollBehavior: () => ({ left: 0, top: 0 })
})

nginx配置

        location / {try_files $uri $uri/ /index.html;}location /threejs {proxy_pass http://127.0.0.1:3333/;      proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $remote_addr;        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header Remote_addr $remote_addr;}