Solve the problem of blank error when refreshing page after configuring non-root directory after Vue3+Vite3 is packaged and deployed to nginx

Error content

Failed to load module script: Expected a JavaScript module script 
but the server responded with a MIME type of "text/html". 
Strict MIME type checking is enforced for module scripts per HTML spec.

Solution

router file

// 创建路由
export const router = createRouter({
    
    
	// 在这里传入项目打包目录
	history: createWebHistory('/demo/'),
	routes: constantRoutes
})

vite.config.ts

nginx.conf

The path apps in the configuration is my self-built folder
to store the front-end pages. The key role is try_files $uri $uri/ /demo/index.html . Of course, the above project folder demo also needs to be consistent.

1. The path after alias is the storage path of the dist static file server after the Vue project is packaged. Generally, a folder is created under nginx to store it.
2. The index.html path behind tryfiles can be consistent with the base in the route creation and vite.config.ts configuration, and can be multi-level directories.
3. The path behind location can be consistent with the upper-level directory of index.html.