问题

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

• 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，或者评论区留言！！！