Implementación del directorio secundario del proyecto Vue3

Descripción del requisito

A veces es necesario implementar varios proyectos front-end bajo el mismo nombre de dominio o el mismo puerto. En este momento, solo un directorio raíz no puede cumplir con los requisitos y se debe configurar un directorio secundario. Además de configurar el directorio secundario en el archivo de configuración de Nginx, también debe agregar algunas configuraciones al proyecto Vue.

configuración específica

.env.producción

# VITE_BASE_URL=/ # 默认配置
VITE_BASE_URL=/gis/  # 二级目录部署时用到

rutas.ts

export const router = createRouter({
    
    
  // history: createWebHistory(), // 默认配置
  history: createWebHistory("/gis/"), // 二级目录部署时用到，https://www.dianjilingqu.com/365908.html
  routes
})

Después de realizar las modificaciones anteriores, la ejecución npm run buildencontrará que el directorio de primer nivel en la carpeta dist generada es la ruta configurada anteriormente, es decir gis.

nginx.conf

        location /gis {
            alias   D:/Code/smartcity-web/dist/gis/;
			try_files $uri $uri/ /hmanage/index.html;
            index  index.html index.htm;
        }

Link de referencia

• Vue 3 utiliza una implementación de directorio secundario (Nginx)