解决Vue3+Vite3 打包部署到nginx后配置非根目录刷新页面报错空白

报错内容

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.

解决方法

router文件

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

vite.config.ts

nginx.conf

配置中路径apps是我自建的存放前端页面的文件夹
起关键作用的是try_files $uri $uri/ /demo/index.html，当然上面项目文件夹demo也需保持一致

1. alias 后面的路径是Vue项目打包后dist静态文件服务器存放路径，一般在nginx下面建一个文件夹存放
2. tryfiles 后面的index.html路径与创建路由和vite.config.ts配置里面的base保持一致即可，可以多级目录
3. location 后面的路径与index.html上级目录保持一致即可