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

三句不合看源码 2024-07-05 15:07:03 阅读 67

问题

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

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,或者评论区留言!!!



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。