五步教你用Nginx部署Vue项目及解决动态路由刷新404问题
更新时间：2022年12月05日 08:49:56 作者：我先润了
nginx 是一个代理的服务器,下面这篇文章主要给大家介绍了关于如何通过五步教你用Nginx部署Vue项目及解决动态路由刷新404问题的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
期末月前本来部署过一次，昨天部署的时候发现又给忘了，而且出了很多问题，在这统一汇总一下。
步骤一：改端口
在vue.config.js下的devServer把host改成服务器的地址
步骤二： 打包
用npm run build打包，最后是这样的，并且目录下多了个dist文件夹
步骤三：将dist文件夹上传到服务器上
我用的xshell，没办法上传文件夹，所以我是压缩成rar用rz上传再在服务器上解压的，至于linux怎么解压rar，看这如何在Linux系统中解压rar文件
肯定有更好的方法，但是我还没找到。解压后长这样
步骤四:修改nginx.conf(重中之重)
这一步很关键，设置不好可能出现页面403或404报错。
首先，用nginx -t找到nginx.conf的具体路径
接下来开始编辑这个文件，下图这个地方要改成当前操作用户的用户名，不然可能部署之后打开页面报错403。
接下来，将1部分改成解压后的dist存放位置
2和3是解决路由刷新报错404的问题
try_files $uri $uri/ @router;
location @router {
rewrite ^.*$ /index.html last;
}
步骤五：重启nginx
systemctl restart nginx
然后就能正常打开页面啦
总结
到此这篇关于五步教你用Nginx部署Vue项目及解决动态路由刷新404问题的文章就介绍到这了,更多相关Nginx部署Vue及动态路由刷新404内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇vue-router 中 meta的用法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
Vue.js 的计算属性和侦听器详解(提升数据处理与交互的关键工具)
在Vue.js开发中,计算属性与侦听器是极为关键的特性,它们极大地提升了数据处理与交互逻辑实现的便捷性和高效性,本文给大家介绍Vue.js 的计算属性和侦听器：提升数据处理与交互的关键工具,感兴趣的朋友一起看看吧2025-04-04
淘宝大家都使用过，淘宝滑动验证码的目的是为了验证到底是人还是机器，今天小编给大家分享的是模仿淘宝滑动验证码的样式，感兴趣的朋友跟随小编一起看看吧2019-12-12
Vue-Access-Control 前端用户权限控制解决方案
Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案。这篇文章主要介绍了Vue-Access-Control：前端用户权限控制解决方案,需要的朋友可以参考下2017-12-12
这篇文章主要为大家详细介绍了Vue使用video标签实现视频播放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的2019-11-11
这篇文章主要介绍了vue深度优先遍历多层数组对象方式(相当于多棵树、三级树)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue3修改link标签默认icon无效问题详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要为大家详细介绍了vue实现div单选多选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
v-for循环中使用require/import关键字引入本地图片的几种方式
在做项目的过程中,模版相同,可是不标题和图片不同,循环标题我们知道可以用v-for循环,可是该怎么引入本地图片呢？下面这篇文章主要给大家介绍了v-for循环中使用require/import关键字引入本地图片的几种方式,需要的朋友可以参考下2021-09-09
最新评论