首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >解决vuejs应用在nginx非根目录下部署时访问404的问题

解决vuejs应用在nginx非根目录下部署时访问404的问题

作者头像
用户1141560
发布2018-07-03 17:09:13
2.9K1
发布2018-07-03 17:09:13
举报
文章被收录于专栏:西安-晁州西安-晁州

以往部署vuejs应用都是直接在nginx的location为/下直接部署,这次遇到要将vue应用部署在/vuejs-admin的非根下,使用以往部署方案直接访问就会404,这时修改步骤如下:

1、修改项目router配置,如下:

这里一是要修改router模式为history,另一个就是修改base地址为要访问的/vuejs-admin的地址,注意前后都有斜线

2、修改build下静态资源路径前缀

同上一部,这里要修改assetsPublicPath为/vuejs-admin/地址

3、执行vuejs打包:npm run build

确保打包后所有静态资源均是相对地址/vuejs-admin开头,比如:

4、修改nginx配置,使用rewrite配置

server {
            listen       80;
            server_name  xxxx.com;

            #charset koi8-r;

            #access_log  logs/host.access.log  main;
        location /vuejs-admin-server {
                    proxy_pass http://127.0.0.1:8080/vuejs-admin-server;
            }
            location ^~/vuejs-admin {
            alias /home/server/webapps/vuejs-admin/;
            #index index.html;
            try_files $uri $uri/ @rewrites; 
        }           
         location @rewrites {
                        rewrite ^/(vuejs-admin)/(.+)$ /$1/index.html last;
                }
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                    root   html;
            }
        }

5、热重载nginx,搞定收工:nginx -s reload

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-07-02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档