Nginx下部署Vue应用,访问链接404

小感触 2020年02月22日 218次浏览

问题出现了之后,其实很容易想到这种错误的原因,因为我们在浏览器地址栏里面输入的链接,实际上是Vue加载完成之后,自己使用JS文件渲染出的路由,根据路由加载组件。换句话说,这个地址对服务器而言是完全错误的,因为资源根本就不存在。

因此在Nginx部署之后,访问链接,由于查找不到服务器下对应的资源,理所当然的404,解决方式也很明了,因为单页应用SPA实际上都是从index.html开始加载整个应用的资源的,所以我们可以试图将所有的请求都定向到首页所在的位置即可:

    location / {
        try_files $uri $uri/ @router;
        index index.html;
    }
    location @router {
        rewrite ^.*$ /index.html last;
    }

这样的话访问一些链接的时候,实际上还是会先进入到首页页面,加载这个SPA的所有资源。而一旦加载完成,后续的所有交互都是通过异步请求交互了,浏览器不会再有刷新行为。