vue-cli3，history模式，在nginx上部署

本文主要是介绍vue-cli3，history模式，在nginx上部署，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

nginx部署上会有很多问题，不建议一步到位，本次主要配置的是vue路由history模式的部署。

若出现问题，先保证使用hash模式正常先。
然后在location 里面加上如下代码
try_files $uri $uri/ /index.html;

我的最终效果：

    location / {root   /usr/share/nginx/web/xxx.com;try_files $uri $uri /index.html;index  index.html index.htm;}

vue使用history模式之后，跳转了除了首页之外的地址刷新后，会出现404。因为跳转之后的地址，是通过h5的api修改了url地址，是个虚拟地址在服务器上不存在这个文件。
所以服务器上需要配置，若找不到就直接输出index.html。

注意：该方法我还没有尝试过二级目录配置。看了下index.html代码，他直接找的是根目录的外部资源文件，所以二级目录还需要进一步设置，没猜错的话，需要二级目录对应一下vue.config的baseUrl

底部有这块的官方文档链接，还未尝试就不直接贴代码了

try_files 解释：
大概意思是找不到的时候，在用后面的位置继续找
输入url： https://xxx.com/path2/home.html
依次查找下方地址，有就返回，都没有估计走了404，具体未测试

1. /usr/share/nginx/web/xxx.com/path2/home.html
2. /usr/share/nginx/web/xxx.com/path2/home.html
3. /usr/share/nginx/web/xxx.com/index.html

参考： vue官方对于nginx部署说明
关于二级目录部署参考配置

这篇关于vue-cli3，history模式，在nginx上部署的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---