nginx 二级目录部署vue项目

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

通过.env环境变量来设置

1. 修改项目的基础路径，我的是vite项目，所以我要在vite.config.js中修改base属性 为 ‘/threejs/’
2. 修改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;

        }