vue项目使用Nginx解决history路由模式白屏

最新推荐文章于 2024-02-08 19:57:46 发布
最新推荐文章于 2024-02-08 19:57:46 发布
阅读量466 收藏 1
点赞数
分类专栏： 总结 文章标签： nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57994974/article/details/117652450
版权
本文介绍了如何使用Nginx解决Vue项目在history路由模式下可能出现的白屏问题。主要步骤包括下载并解压Nginx，避免路径含有中文，然后编辑nginx.conf文件，重点修改location / 的配置。
摘要由CSDN通过智能技术生成

1、首先我们去下载Nginx

Nginx

2、下载完成后我们解压到一个文件中。

在这里插入图片描述

注意：解压的路径不能有中文

3、我们打开conf文件下面有一个nginx.conf文件，我们需要修改它的配置。

在这里插入图片描述

4、找到location /

修改为

location / {
   
                root   html/dist/;
                try_files $uri $uri/
最低0.47元/天 解锁文章
紫冰花飘
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nginx 配置 解决 vue history模式下空白 ，以及SSL证书安装
m0_61068496的博客
04-21 828
server {#你的域名root html;#你的网站根目录#网站默认访问文件NULL:!aNULL:!MD5:!ADH:!RC4;uribaiyiuri//baiyilocation ~ .php(.*)$ { #HP必须的配置，否则浏览器访问会直接下载php源码文件.+)$;
nginx history模式 解决 路由跳转白屏
gu2022_3_5_21_23的博客
03-05 541
Vue下路由History模式打包后页面空白的解决方法
08-27
主要介绍了Vue下路由History模式打包后页面空白，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue项目使用Nginx服务器配置(路由history模式白屏如何处理）
m0_57142556的博客
06-07 531
Vue项目使用Nginx服务器配置(路由history模式白屏如何处理): 第一步:先下载Nginx; 第二步:将下载之后的Nginx压缩包解压到指定文件(Nginx项目目录如下,解压的路径不能是含有中文的): 第三步:把解压后的目录整体拖进vscode,找到conf文件中的nginx.conf文件,修改里面的配置： 找到 location / {} 选项,在里面写： ...
Nginx解决Vue路由history模式白屏问题
weixin_49639325的博客
06-07 1982
首先我们把写好的项目放到nginx服务器上，html目录中 z
关于vue私用history模式打包到服务器出现白屏的原因以及解决办法
qq_41227106的博客
03-23 2247
1、vue-router在切换路由的时候有两种模式，第一种是hash（默认的），第二种是history，这两种的区别有： 第一，url的不同，使用hash模式url会带有#而history模式就像普通的路径一样 第二， ...
vue项目打包上线流程（nginx服务器配置、路由history模式白屏如何处理）
七的博客
06-08 516
Vue打包上线流程
Nginx与history路由模式：刷新页面404问题
席木木的博客
02-08 4699
Nginx与history路由模式：刷新页面404问题，通过nginx服务端配置解决
在nginx上部署vue项目(history模式)的方法
08-28
vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。这篇文章主要介绍了在nginx上部署vue项目(history模式),需要的朋友可以参考下
nginx访问白屏
weixin_34025051的博客
07-11 3044
nginx访问白屏原因：屏置文件有问题，没有解析到代码，检查配置文件 转载于:https://blog.51cto.com/yht1990/2140579
Vue第14篇，Vue项目上线nginx后，页面刷新丢失？（nginx页面刷新丢失）
weixin_65793170的博客
12-02 1329
【代码】vue项目上线后，页面刷新丢失？（nginx页面刷新丢失）
vue 打包路由报错_Vue下路由History模式打包后页面空白的解决方法
weixin_33994823的博客
12-31 1119
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息.这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官...
nginx 部署vue项目，页面白屏或者页面刷新出现404问题
qq_52700250的博客
06-22 8867
解决在nginx 部署vue项目时，页面白屏或刷新出现404问题
解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页
weixin_42644340的博客
08-12 1万+
解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页前言问题分析 前言 总所周知，Vue路由有两种模式，默认hash模式，这种模式下url上会带"#"，因此很多公司开发都不使用hash模式而选用另一种history模式，因为history模式下的url不会带上"#"。不带"#"既是history模式的优势，同时让它带来了一些烦人的问题，比如打包部署页面刷新为空白页，使用嵌套路由刷新为空白页的问题。今天我就分享下我解决嵌套路由刷新的问题。 问题分析 以下是我学习/测试时写的二级路由 当我第
vue3 history模式配置及nginx服务器配置
热门推荐
持续学习中
04-11 1万+
vue3开始默认新建的项目都是history模式，不过history模式打包后想要使用正常访问的话，需要后端服务器进行配置才可以，否则可能会出现刷新后404的问题。这样，我们通过访问https://abc.xxx.com/calculator/或者https://abc.xxx.com/calculator/wap/这个路径就可以正常使用了，刷新也不会出现404问题。以上例子中vite.config.js的配置，打包后访问的路径为https://xxx.com/calculator/。
vue动态添加路由后刷新页面白屏问题
weixin_47673864的博客
06-10 3840
页面刷新白屏其实是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了在通过vuex中的state属性存储路由在sessionStorage中，只是存储了左侧菜单栏展示的信息path地址，但是并没有存进去路由详细信息，比如name，meta值，利用vue插件即可看到本地route里面的真实数据！所以；只需要添加路由守卫，在每次页面刷新的时候都来判断是否添加的动态路由【这里设置一个变量记录是否添加的布尔值】，如果为false，即再次执行一遍添加动态路由的过程即可next（） 在
vue打包后nginx部署打开白屏，查看net发现资源地址错误（nginx同80端口部署多个vue项目）
CHENC0518的博客
10-02 2552
vue打包后nginx部署打开白屏，查看net发现资源地址错误（nginx同80端口部署多个vue项目）
vue项目使用Nginx
最新发布
06-05
Vue.js 是一个流行的前端框架，常用于构建单页面应用。Nginx 是一个轻量级的 Web 服务器，可以用于反向代理、负载均衡、静态资源服务等。在 Vue.js 项目中使用 Nginx 可以提高应用性能和安全性。 以下是在 Vue.js 项目中使用 Nginx 的步骤： 1. 安装 Nginx，并配置 Nginx 的相关参数，比如监听的端口号、静态资源路径等。 2. 将 Vue.js 项目打包成静态资源文件，可以使用命令 `npm run build` 或者 `yarn build` 进行打包。打包后会生成一个 dist 目录，包含了所有的静态资源文件。 3. 将 dist 目录下的所有文件拷贝到 Nginx 的静态资源目录下，比如 `/usr/share/nginx/html` 目录。 4. 配置 Nginx 的反向代理，将请求转发到 Vue.js 应用的监听端口上。可以使用以下的配置： ``` server { listen 80; server_name your_domain.com; location / { proxy_pass http://localhost:3000; # 将请求转发到 Vue.js 应用的监听端口 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location /api/ { proxy_pass http://api.your_domain.com; # 将请求转发到后端 API 服务的地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` 上面的配置将所有请求都转发到 Vue.js 应用的监听端口上，同时将 `/api/` 开头的请求转发到后端 API 服务的地址上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值