Vue3 project secondary directory deployment

Description of Requirement

Sometimes it is necessary to deploy multiple front-end projects under the same domain name or the same port. At this time, only one root directory cannot meet the requirements, and a secondary directory needs to be configured. In addition to configuring the secondary directory in the Nginx configuration file, you also need to add some configurations to the Vue project.

specific configuration

.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
})

After making the above modifications, the execution npm run buildwill find that the first-level directory under the generated dist folder is the path configured above, that is gis.

nginx.conf

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

reference link

• Vue 3 uses a secondary directory deployment (Nginx)