Vue项目使用Nginx服务器配置(路由history模式白屏如何处理）

最新推荐文章于 2024-04-27 01:13:47 发布
最新推荐文章于 2024-04-27 01:13:47 发布
阅读量286 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lql2001525/article/details/117686120
版权

Vue项目使用Nginx服务器配置(路由history模式白屏如何处理):

第一步:先下载Nginx;

 

第二步:将下载之后的Nginx压缩包解压到指定文件(Nginx项目目录如下,解压的路径不能是含有中文的):

 

第三步:把解压后的目录整体拖进vscode,找到conf文件中的nginx.conf文件,修改里面的配置：

找到  location / {} 选项,在里面写：

 

吃饱了就减肥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Nginx】解决在Nginx+Vue部署多个前端项目，二级目录不能访问、访问空白的问题
走在搬砖的路上！
01-31 4664
解决在Nginx+Vue部署多个前端项目，二级目录不能访问、访问空白的问题
Vue项目部署Nginx配置文件 SSL
08-11
Vue项目结果build编译后，放在Nginx的html文件夹内，替换该配置文件，就可以在Nginx服务器上运行Vue项目
nginx location 多级目录配置
卡卡西：一个擅长拷贝的前端程序员
10-15 1万+
很多情况下，我们的一个项目中要区分多级目录，如dev、pub环境等，这时候需要通过nginx的location配置，不同环境的代码走不同的目录（当然，条件允许的话可以不同环境对应不同域名，如dev环境：dev.google.com，pub环境：pub.google.com） 可对nginx作如下配置： server { listen 80; server_name progect.google.com; location /dev/ { root /www/p
nginx配置域名后的二级目录访问不同项目的配置
Honins的博客
06-16 1万+
场景描述： 通过二级目录（虚拟目录，应用程序）的方式访问同一ip+端口的不同应用，例如location是用户使用页面，location/admin/是管理页面，location部署在192.168.1.100的80端口，location/admin部署在172.20.1.32的8080端口上。 解决方案： 使用nginx反向代理，配置如下： server { listen...
nginx 配置 解决 vue history模式下空白 ，以及SSL证书安装
最新发布
2301_82243603的博客
04-27 392
2.1.5 必须为 v-for 设置键值 key。2.1.6 v-show 与 v-if 选择。2.1.7 script 标签内部结构顺序。2.2.2 使用 Vue-cli 脚手架。2.1.8 Vue Router 规范。2.1.2. 模板中使用简单的表达式。2.1.3 指令都使用缩写形式。2.1.4 标签顺序保持一致。2.1.1. 组件规范。2.2.3 目录说明。
Nginx 配置指向多个目录，js、css 404等问题解决
ATwill的专栏
10-23 7437
目标： 同一域名， 同一端口， 实现 两个前端项目的无缝跳转和链接 1. 通过 location 指向需要跳转的目录 location /new-home/ { alias /mnt/new/pgv/; index index.html index.htm index.php; } 注意：alias 和 root 的区别： roo...
在nginx上部署vue项目(history模式)的方法
08-28
vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。这篇文章主要介绍了在nginx上部署vue项目(history模式),需要的朋友可以参考下
Vue下路由History模式打包后页面空白的解决方法
08-27
在 Vue 项目中，使用 History 模式需要正确地配置路由的 base 参数和服务器的路由配置，否则会出现页面空白的问题。同时，也需要注意如果项目不是根目录下，需要添加 base 参数，以便 Vue 路由正确地解析 URL。 ...
针对Vue路由history模式下Nginx后台配置操作
01-18
前端将vue路由模式改为history模式后需要运维配置才能正常访问，配置信如下 location / { root html; index index.html index.htm; try_files $uri $uri/ @rewrites; } location @rewrites { rewrite ^(.+)$...
vue打包后nginx部署打开白屏，查看net发现资源地址错误（nginx同80端口部署多个vue项目）
CHENC0518的博客
10-02 2498
vue打包后nginx部署打开白屏，查看net发现资源地址错误（nginx同80端口部署多个vue项目）
vue发布到nginx下访问资源404，或白屏问题
liulang1905的博客
06-15 2752
这里先说404问题，比较简单就是vue中路由mode的问题 如果不嫌弃地址有#号的话就改成默认hash或者直接将这个属性删了就行，删了直接使用默认 如果说不想地址有#的话配置下nginx即可 nginx配置 try_files $uri $uri/ /index.html; 如果以上已解决您的问题可以不在往下看了，下面只是记录自己的一个踩坑过程，避免以后再犯 我的路由一直是使用的是 history ，没有配置nginx所以有了很多问题 先描述以下错误症状， 一开始发布到nginx下能访问，但是访问一会
解决nginx反向代理页面空白!
简单记录
10-17 4916
nginx反向代理 后端服务页面空白是因为什么?如何解决.
nginx配置history模式路由
qq_42451776的博客
08-06 5800
对nginx配置文件.conf修改 server { listen 80; server_name www.xxx.com; location / { index /data/dist/index.html; try_files $uri $uri/ /index.html; } } 重启 nginx -s reload 前端路由添加404页面 这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件 为了避免这种情
nginx配置vue的History 模式
李青林的博客
05-29 929
location / { index index.html index.htm; try_files $uri $uri/ @fallback; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST.
nginx转发到页面白屏
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
11-17 478
laravel安装完成后，访问public目录，显示一片空白怎么回事 白屏没有错误提示一般是php.ini的display_errors没有启用的问题 所以首先确保display_errors已经是On的状态 然后打开Debug模式 在app/config/app.php中将’debug’=>false改为’...
nginx+php-fpm配置后页面显示空白的解决方法
热门推荐
高飞的专栏
10-09 2万+
OS: Ubuntu 15.04 由于nginx与php-fpm之间的一个小bug，会导致这样的现象： 网站中的静态页面 *.html 都能正常访问，而 *.php 文件虽然会返回200状态码， 但实际输出给浏览器的页面内容却是空白。 简而言之，原因是nginx无法正确的将 *.php 文件的地址传递给php-fpm去解析， 相当于php-fpm接受到了请求，但这请求却指向一个不存在的文件，
vue路由history模式下nginx后台配置
05-01
Vue路由的History模式是一种利用浏览器的History API来实现路由跳转的模式，它的优点在于可以消除URL中的#号，并且更加美观，但需要后台支持。在使用Nginx作为后台服务器时，需要对Nginx进行相关配置。 首先，在Nginx的配置文件中需要添加如下配置： ``` location / { try_files $uri $uri/ /index.html; } ``` 以上配置表示如果请求的文件或目录不存在，则转发到index.html，这样Vue的前端路由就能够正常运作。 另外，还需要配置Nginx的静态资源目录，例如： ``` location /static/ { root /var/www/myapp; } ``` 表示请求/static/文件时，将交由/var/www/myapp目录下的文件处理。 需要注意的是，如果使用Vue的History模式，很可能会出现“404页面找不到”的错误，因为Nginx接收到的URL都是以/开头的，Nginx会将这些URL视为文件路径进行处理，而不是Vue路由中的路径。这时候需要对Nginx进行进一步配置，例如： ``` location /app/ { try_files $uri $uri/ /app/index.html; } ``` 表示所有以/app/开头的请求都交由/app/index.html处理，这样就可以解决404页面找不到的问题。 总之，对于Vue路由的History模式，需要在Nginx服务器上进行相关的配置，保证前后端的对接顺畅，使得应用程序能够正常运行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值