Nginx部署Vue解决页面404报错

简介: 在部署vue、react的前端项目时,经常会出现404的问题,一般是文件不是真正的存在,所以Nginx报404的错误

一、打包项目

1.在项目中的package.json上右键,点击Show npm Scripts
image.png
*2.打包(或者直接在项目根目录运行 npm run build 命令)*
image.png
3.成功后会在项目根目录生成dist文件夹
image.png

二、压缩并上传项目到服务器(我这里是使用SecureCRT工具进行上传和部署项目的)

SecureCRT版本信息如下:
image.png

1.压缩文件
image.png
**2.上传文件
**
2.1 输入命令rz -y上传(我这里是上传到root目录下的)
image.png
若没有上传信息,可再次输入rz命令完成上传
image.png
三、解压此文件到nginx/html/目录下
image.png
四、复制dist目录到nginx的html目录中
image.png
到此vue项目就全部部署到nginx服务器中啦!
**
五、解决项目部署到nginx服务器中刷新页面404的问题**

1. 进入nginx配置文件目录
cd nginx/conf/
2.编辑配置文件nginx.conf

vi nginx.conf 输入命令 i 进入编辑模式,在指定位置添加代码 location / { root ... index ... try_files $uri $uri/ /index.html; ---解决页面刷新404问题}

  1. 保存退出

i --编辑esc然后:w --保存:quit --退出

常用命令:

  1. rz -- 上传文件
  2. rz -y -- 上传文件(存在同名文件则覆盖)
  3. unzip -- 解压文件(例:unzip dist.zip)
  4. rm -f -- 删除文件不存在不提示信息
  5. rm -rf -- 删除目录及目录下的文件
  6. rm -- 删除文件,不能删除目录,删除的文件可恢复
  7. ./nginx -t -- 验证nginx配置文件是否正确
  8. ./nginx -s reload -- 重启nginx
相关文章
|
3月前
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
156 2
|
3月前
|
弹性计算 运维 监控
快速部署 Nginx 社区版
Nginx是一个高性能的HTTP和反向代理服务器。Nginx在计算巢上提供了社区版服务,您无需自行配置云主机,即可在计算巢上快速部署Nginx服务、实现运维监控,从而方便地基于Nginx搭建您自己的应用。本文介绍使用如何通过计算巢快速部署Nginx社区版。
快速部署 Nginx 社区版
|
2月前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
59 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
3月前
|
JavaScript
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
本文讨论了在使用Vue和Element UI实现树形数据和懒加载时遇到的“Maximum call stack size exceeded”错误,指出问题的原因通常是因为数据中的唯一标识符`id`不唯一,导致递归渲染造成调用栈溢出。
104 1
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
|
2月前
|
前端开发 JavaScript 应用服务中间件
使用nginx部署网站
使用nginx部署网站
|
2月前
|
JavaScript 应用服务中间件 nginx
nginx部署vue项目
本文介绍了将Vue项目部署到Nginx的步骤,包括构建Vue项目、上传dist文件夹到服务器、安装Nginx、配置Nginx代理静态文件以及重启Nginx,确保了Vue应用可以通过域名或IP地址访问。
121 1
|
1月前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
60 0
|
2月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
430 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
2月前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day04【28.详情页面Detail】
vue尚品汇商城项目-day04【28.详情页面Detail】
19 1
|
2月前
|
Kubernetes 应用服务中间件 nginx
k8s基础使用--使用k8s部署nginx服务
本文介绍了Kubernetes中核心概念Deployment、Pod与Service的基本原理及应用。Pod作为最小调度单元,用于管理容器及其共享资源;Deployment则负责控制Pod副本数量,确保其符合预期状态;Service通过标签选择器实现Pod服务的负载均衡与暴露。此外,还提供了具体操作步骤,如通过`kubectl`命令创建Deployment和Service,以及如何验证其功能。实验环境包括一台master节点和两台worker节点,均已部署k8s-1.27。
203 1