当前位置:首页 > 技术分析 > 正文内容

Nginx部署Vue项目以及解决刷新页面404

ruisui884个月前 (02-03)技术分析18

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

一、打包项目

1.在项目中的package.json上右键,点击Show npm Scripts

2.打包(或者直接在项目根目录运行 npm run build 命令)

3.成功后会在项目根目录生成dist文件夹

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

SecureCRT版本信息如下:

1.压缩文件

2.上传文件

2.1 输入命令rz -y上传(我这里是上传到root目录下的)

若没有上传信息,可再次输入rz命令完成上传

三、解压此文件到nginx/html/目录下

四、复制dist目录到nginx的html目录中

到此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问题}

3. 保存退出

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

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/1499.html

标签: vue 多页面
分享给朋友:

“Nginx部署Vue项目以及解决刷新页面404” 的相关文章

Gitlab概览

Gitlab是开源的基于Git的仓库管理系统,也可以管理软件开发的整个生命周期,是项目管理和代码托管平台,支撑着整个DevOps的生命周期。Gitlab很容易选为GitHub,作为公司私有库管理的工具。我们可以用Gitlab Workflow来协同整个团队的软件开发管理过程。软件开发阶段Gitlab...

前后端分离自动化运维平台开发

运维平台采用前后端分离:前端vue,框架vue-element-admin;后端python,框架django-rest-framework.目前运维平台模块如下:1、 CMDB管理应用管理、环境管理、开发语言管理、产品项目管理、资产管理2、 构建发布持续构建、持续部署、Jar工程依赖构建3、 容器...

HTML5最新版本介绍

HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最新版本,它是用于生成现代 Web内容的一系列相关技术的总称,其中最重要的三个技术是:HTML5核心规范...

全新斯柯达柯珞克Karoq深度评测:大众替代品

“斯柯达柯珞克是一款出色的全能家庭 SUV,具有许多有用的功能”价格36,605 英镑- 49,190 英镑优点方便的 VarioFlex 后排座椅非常适合家庭入住驾驶乐趣缺点保修期短保守的内饰性格比Yeti少结论——斯柯达柯珞克是一辆好车吗?斯柯达柯珞克是在辉煌的七座 斯柯达柯迪亚克之后推出的,因...

三维家-系统快捷键使用

快键件使用:通过简单的键盘+鼠标操作,快速完成搭配。1.基础快捷键1) Ctrl+V:复制选中对象第一步:鼠标左击物体,按下Ctrl+V 即可复制选中对象。2) Ctrl+G:组合多选对象第一步:按住Ctrl键多选对象--按住Ctrl+G--确定。3) Ctrl+B:解组选中对象第一步:左击选中对象...

USB电池充电基础:应急指南

USB为便携设备供电与其串行通信功能一样,已经成为一种标准应用。如今,USB 供电已经扩展到电池充电、交流适配器及其它供电形式的应用。应用的普及带来的一个显著效果是便携设备的充电和供电可以互换插头和适配器。因此,相对于过去每种装置都采用专用适配器的架构相比,目前的解决方案允许采用多种电源进行充电。毋...