vite+vue3打包后部署nginx Failed to load module script，空白页，404，反向代理等问题。

问题

        先说部署项目可能会遇到的全部问题

• npm run build后打开是空白页
• nginx 导航栏刷新404的问题
• 反向代理配置问题
• Failed to load module script问题

1、npm run build后打开是空白页

以下是解决方案，在vite.config.js中加上base:'/'或者base:'./'，注意，一个带.，一个没带。好，重点来了，两者都可以解决部署到服务器上空白页的问题，那么，这两者有什么区别呢？可能会出现问题4的情景。因为我出现了，我使用的是'./'。

export default defineConfig({
  base: '/',
  ....
})

2、 nginx 导航栏刷新404的问题

        这个问题是这样的，如果我们通过页面内的点击跳转的时候，我们页面可以正常加载，但是如果我们直接在浏览器的url地址栏输入我们项目地址直接访问的时候，会出现这个问题。

        那么我们怎么解决呢？我们需要在nginx配置文件中加上如下配置: 

#没加之前
server {
		listen 80;
		server_name  www.example.com;           #域名或者ip
        location / {
	        root   /www/project;                        #这里是项目地址
	        index  index.html index.htm;
        }
        ....
}
#加之后
server {
		listen 80;
		server_name  www.example.com;
        location / {
	        root   /www/project;
	        index  index.html index.htm;
	        try_files $uri $uri/ /index.html;
        }
        ....
}

3、反向代理配置问题

        推荐参考这篇文章:nginx反向代理后端接口-CSDN博客，写的不错，解决了我配置的问题。

4、Failed to load module script问题

        在本地测试项目的时候正确加载没有问题，然而部署到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.

        首先我以为是我本地自己引入的外部js问题，后来发现我把本地需要的js换成了cdn在线js，还是会出现这样的错误，所以排除了我本地js的问题。因为我本地是没有问题的，所以应该是nginx配置的问题了。

        好，解决方案在于问题1配置的base需要和nginx配置的location路径相同，怎么解释呢，给看以下: location 后面的路径是 / ,所以我base配置的路径也应该是/,而不是./。

location / {
	root   /www/project;
	index  index.html index.htm;
	try_files $uri $uri/ /index.html;
}

 配置一致之后以上问题得到解决:也可参考以下博客Sticky Note | Vite项目打包部署Nginx的一些Issue - 掘金 (juejin.cn)

后续需要问题还会继续列出：遇到问题可进群交流：758301308，或者评论区留言！！！