问题

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

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

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

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

<code>export default defineConfig({

base: '/',

....

})

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

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

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

<code>#没加之前

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