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
相关文章
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
733 2
|
JavaScript 前端开发 算法
vue渲染页面的原理
vue渲染页面的原理
432 56
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
2063 9
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
379 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
JavaScript
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
本文讨论了在使用Vue和Element UI实现树形数据和懒加载时遇到的“Maximum call stack size exceeded”错误,指出问题的原因通常是因为数据中的唯一标识符`id`不唯一,导致递归渲染造成调用栈溢出。
1441 1
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
|
JavaScript 应用服务中间件 nginx
nginx部署vue项目
本文介绍了将Vue项目部署到Nginx的步骤,包括构建Vue项目、上传dist文件夹到服务器、安装Nginx、配置Nginx代理静态文件以及重启Nginx,确保了Vue应用可以通过域名或IP地址访问。
1125 1
|
JavaScript 应用服务中间件 开发工具
vue尚品汇商城项目-day07【53.nginx反向代理配置】
vue尚品汇商城项目-day07【53.nginx反向代理配置】
210 4
|
JavaScript 前端开发 API
vue尚品汇商城项目-day04【28.详情页面Detail】
vue尚品汇商城项目-day04【28.详情页面Detail】
233 1
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
4754 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)