vue上线服务器后，地址一级目录可刷新，二级目录刷新404

梦里梦外; 2022-05-15 01:05 166阅读 0赞

![70][]

![70 1][]

如上图，当路径是 “xxx.com/项目名/aaa/aaa”时，刷新页面404.

当页面路径是“xxx.com/项目名/aaa”时，页面刷新没问题。这种情况我是配置nginx解决的，当时以为完全没问题了，但是后来发现路径是2级时，还是会报404。

nginx配置是这样的

![70 2][]

这么配置项目的1级目录没问题。

排查的时候，发现有这个问题：

![70 3][]

多了一个work，而这个work是我url路径中的，也就是说，在二级目录情况下，项目名后的内容全部转到css文件的链接里。而css文件的地址是在index.html文件里制定的。

所以，改index.html的文件指定可能能够解决问题。

![70 4][]

这里的地址原来是 ./ ，改成  / 指定根目录就行了。

最后，完整配置。

**nginx的写法**

![70 5][]

**vux配置的写法**

**build后的index,html  注意src后面的路径是 / ，而且还要格式化，否则页面报错  <  不匹配**

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset=utf-8>
    	<meta name=viewport content="width=device-width,initial-scale=1,user-scalable=0">
    	<title>langyage</title>
    	<link href=/static/css/app.4432fa808077d4235a46d7d73b8d3cfc.css rel=stylesheet></head>
    	<body>
    		<div id=app></div>
    		<script type=text/javascript src=/static/js/manifest.9db9b7cabcc268e9610e.js></script>
    		<script type=text/javascript src=/static/js/vendor.cbde8b6cd7f913d90f1d.js></script>
    		<script type=text/javascript src=/static/js/app.2d49e2415af0bd0f5dd9.js></script>
    	</body>
    	<style>
    </style>
    <script>
    	
    </script>
    </html>

![70 6][]

改了之后，ok!

[70]: /images/20220515/8665a858d0974733ba4ac0f8fea4da92.png
[70 1]: /images/20220515/0ce1abcd901a438ea14bdd38741a2440.png
[70 2]: /images/20220515/3a35c8c7dea643869eebc1a003726bad.png
[70 3]: /images/20220515/41e393934868482d8ee94715485849a6.png
[70 4]: /images/20220515/d75b7aa1015945f3bb9186c5f5bb1cb3.png
[70 5]: /images/20220515/dd7393ab81e342da8bfbf50bfc622828.png
[70 6]: /images/20220515/bf5d0bb5f37f4e6bb741529b1460de8d.png