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

最新推荐文章于 2024-09-25 00:21:53 发布
最新推荐文章于 2024-09-25 00:21:53 发布
阅读量318 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lql2001525/article/details/117686120
版权
本文介绍了如何配置Nginx服务器以处理Vue项目的路由history模式，避免出现白屏现象。首先下载并解压Nginx到无中文路径的目录，然后在vscode中编辑nginx.conf文件，找到location块，添加try_files指令以正确处理单页应用路由。
摘要由CSDN通过智能技术生成

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

第一步:先下载Nginx;

 

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

 

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

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

 

吃饱了就减肥
关注
vue项目使用Nginx解决history路由模式白屏
紫冰的博客
06-07 488
1、首先我们去下载Nginx Nginx 2、写在完成后我们解压到一个文件中。 注意：解压的路径不能有中文 3、我们打开conf文件下面有一个nginx.conf文件，我们需要修改它的配置。 4、找到location / 修改为 location / { root html/dist/; try_files $uri $uri/ /dist/index.html; index index.html;
vue项目打包上线流程（nginx服务器配置、路由history模式白屏如何处理）
七的博客
06-08 541
Vue打包上线流程
vue项目如何部署到nginx服务器
田兴的博客
11-12 3万+
mac下安装nginx 安装工具： homebrew（还没用过的小伙伴可以点链接进行了解或者自行百度） 步骤： 1、打开终端，习惯性命令：更新 brew update 2、终端继续执行命令： brew search nginx //查询要安装的软件是否存在 3、这里我们多执行一步“废”命令，不过有利于我们后面的配置： brew info nginx 我们可以看到，nginx在本地还未安装（Not installed），nginx的来源（From），Docroot默认为/usr/local/v
vue项目如何部署到nginx服务器，武汉软通动力前端面试
最新发布
2401_87298459的博客
09-25 964
wq根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记。
将vue项目部署到nginx服务器
u014173969的博客
04-20 331
1、将dict目录下的文件部署到/usr/share/nginx/目录下 2、更改nginx配置 location / { } location ^~/api/ { proxy_pass http://127.0.0.1:8080/; } 配置解析 配置解析通配符 ...
Vue项目部署到Nginx服务器
极限突破者的博客
05-17 2933
本文将详细介绍如何将Vue前端项目部署到Nginx服务器。Nginx是一款开源的高性能HTTP服务器和反向代理服务器。
vue项目部署到ngix服务器
CirtusSoda的博客
11-04 248
注： 本文选择了nginx做web服务器。因为在本文vue前端项目中，需要从接口获取数据，可是数据与vue前端项目是在同一ip地址但不同端口号，所以需要跨域读取数据。本文的跨域处理是使用了nginx。环境：阿里云服务器（ubuntu 64bit）xshellnginx1.使用xshell登录到阿里云服务器。安装nginx（本文安装到/etc下）cd /etc apt-get update apt-get install nginx cd /etcapt-get updateapt-get instal
vue打包上线流程，nginx服务器配置（路由history模式白屏如何处理）
weixin_57750909的博客
06-08 462
一、项目完成后运行npm run build,生成一个打包文件夹tests，把这个文件夹放到html目录下 二、liuulanqifang
Vue下路由History模式打包后页面空白的解决方法
12-09
同时，对于其他服务器环境（如 Apache 或 IIS），也需要相应的配置来处理 History 模式的路由。 总之，Vue Router 的 History 模式提供了更佳的 URL 体验，但部署时需要对服务器进行适当的配置，以避免页面空白的...
vue项目通过nginx部署到服务器
Summer_Uncle的博客
03-08 730
当你在开发环境中运行 Vue 项目时，devServer 的代理配置允许你将特定的请求代理到后端服务器，以便在开发过程中模拟生产环境中的 API 请求。但是，一旦你将 Vue 项目部署到 Nginx 中，Nginx 将成为前端和后端之间的统一入口，所有的请求都将由 Nginx 接收并处理。因此，如果你的 Vue 项目中有依赖于代理的请求，你需要在 Nginx 配置中设置适当的代理规则，以确保这些请求被正确路由到后端服务器。部署的服务器是阿里云买的,使用finalShell根据账号秘密链接服务器即可。
nginx 部署vue项目，页面白屏或者页面刷新出现404问题
qq_52700250的博客
06-22 9189
解决在nginx 部署vue项目时，页面白屏或刷新出现404问题
vue项目部署到nginx
hrj199036的博客
02-27 195
vue项目部署到nginx
用nginx将Vue项目部署在服务器上
qq_60391201的博客
04-10 874
使用nginx将vue项目部署到服务器上，简单轻松！
Vue项目部署（Nginx）
weixin_42067873的博客
09-05 1万+
vue项目部署
vue项目部署到服务器nginx以及手机端测试
good god~的博客
12-13 1134
前言：实习也快半年了，一直都是在学习前端，对于打包部署上线这玩意都是觉得好高大上，好难，昨天学习完了之后就发现也就这么回事，一点都不难（当然上线我还没学到） 据我所了解的服务器有nginx服务器，Apache tomcat服务器（我的天哪，原来tomcat是个服务器，我TM Java Web学了啥），nginx服务器是个轻量级、又简单的服务器，身边的同事都有用到nginx，所以我就用它来部署vu...
vue项目部署到服务器nginx（超简单）
热门推荐
我的第一篇文章
06-30 3万+
nginx服务器是一个轻量级、又简单的服务器，所以，对我来说，部署我的vue项目就选择它了。 首先，下载nginx服务器，官网下载地址http://nginx.org/en/download.html。我选择的是1.8.1版本。 下载完后，解压到自定义目录。目录结构如下： 输入cmd，开启nginx服务 如果你碰到了0.0.0.80: failed这样的错误，错误在logs的e...
vue部署到nginx
明耀的博客
08-27 401
1、安装nginx 2、打包vue项目 npm run build 生成 3、配置nginx location / { root edu/dist; #dist路径 index index.html index.htm; } 4、放入dist 5、成功访问 http://localhost/
nginx 部署 vue3 项目 History路由模式，要怎么配置nginx
09-19
Nginx部署Vue3项目时，特别是在使用History路由模式下，你需要配置服务器来支持静态文件和处理动态请求到应用服务器。以下是基本的步骤： 1. **设置Nginx server block**: 创建一个名为`vueapp.conf`的虚拟主机...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值