五步教你用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-cli来构建Vue项目的步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
本篇文章将会尝试从算法的角度主要聊一聊vue2的diff策略,帮助读者朋友在遇到相关的面试题时可以和面试官谈笑风生,文中有相关的图解和代码示例,感兴趣的同学跟着小编一起来看看吧2023-08-08
这篇文章主要介绍了vue 解决IOS10低版本白屏的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue3属性绑定方法解析，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
这篇文章主要介绍了react和vue的事件处理差异,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue arco.design锚点Anchor使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了vue中input的v-model清空操作，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
学习了几天Vue之后终于迎来了第一个小案例,todoList是非常常见地一个小案例,下面这篇文章主要给大家介绍了关于使用Vue写一个todoList事件备忘录经典小案例的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue实现打印功能的两种方法,文中通过两种方法给大家介绍了指定不打印区域的解决方法，需要的朋友可以参考下2018-09-09
最近在做一些数据透析的项目需要用到报表图，那么报表图好用的有老牌的ECharts，比较新意的AntV，思前马后的想了一下还是用了Echarts，这篇文章主要介绍了vue3中使用Apache ECharts,需要的朋友可以参考下2022-11-11
最新评论