NGiNX

Vue.js 项目部署后，在部分页面内刷新会报错。

起因

单页面 Vue.js 项目部署后，在部分页面内刷新会报错。

访问举例地址：https://www.domain.com/web/dashang/mall/

点击其中页面后路径变为 https://www.domain.com/web/dashang/mall/activity?VNK=2d91cc2f

探索

项目目录结构为

[root@test ~]# cd /usr/share/nginx/html/dist/
[root@test dist]# ll
total 4
-rw-r--r-- 1 root root 596 Jul  1 00:01 index.html

小贴士：其他静态资源因为使用了 CDN 缓存，可以看到只有一个 index 入口文件。

CDN 目录树

.
├── dashang
│   ├── css
│   │   └── app.ec9f8b08af26e8fd771d084786f0abb4.css
│   ├── js
│   │   ├── app.1ca72947f4fa553557f2.js
│   │   ├── manifest.a32e1a72d5bb4bf2a958.js
│   │   └── vendor.4591f916de0802a4b319.js
│   ├── img
│   │   ├── iconfont.3bb5127.svg
│   │   ├── nowdirc.png
│   │   └── ytx
│   │       ├── HomeText.jpg
│   │       ├── activeBg.png
│   │       ├── .
│   │       ├── .
│   │       ├── .
│   │       └── activeOne.png
│   ├── fonts
│   │   ├── element-icons.535877f.woff
│   │   └── iconfont.8f18d23.eot

刷新页面会发现 404 报错，这是因为 Vue.js 项目中 react-router 设置的路径并不是实际存在的文件路径。这些访问路径是在 JS 中渲染的，并不实际存在。

解决

将 NGINX 的首页跳转规则正确跳转即可，将 react-route 的地址进行重定向即可。

server {
    listen       80;
    server_name  www.domain.com;

    location / {
        root   /usr/share/nginx/html/dist;
        try_files $uri $uri/ @router;
        index  index.html;
    }

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

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /data/projects/localhost;
        }
}

---

附录

参考链接

• react,vue等部署单页面项目时,访问刷新出现404问题 - 简书

本文由 柒 创作，采用 知识共享署名4.0 国际许可协议进行许可。
转载本站文章前请注明出处，文章作者保留所有权限。
最后编辑时间： 2019-07-02 16:58 PM