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

以往部署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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JetpropelledSnake

Python Web学习笔记之Cookie,Session,Token区别

2787
来自专栏张戈的专栏

身份切换脚本,免登入切换权限的利器

分享一个我曾经写过的功能代码:工具身份切换脚本,主要用于脚本执行期间其他身份(如 administrator 等)的切换,从而获取到所需权限。 使用说明: 1....

3506
来自专栏施炯的IoT开发专栏

Windows Phone SDK 7.1.1 Update正式版发布

     本次更新主要包含了对256M内存设备的支持,包含了256M设备的模拟器,并且更新了512M内存模拟器的版本。      安装此更新,是建立在WP SD...

1917
来自专栏LinXunFeng的专栏

hexo+github 搭建个人技术博客

1803
来自专栏java系列博客

【redis】安装与运行:Creating Server TCP listening socket 127.0.0.1:6379: bind: No error

5425
来自专栏vue学习

31、地址新增 — 定义数据结构与获取方式

(1)让我们进入addressEdit.vue页面填写一条地址,ok,现在假设你已经填写完毕。 (2)这个时候我们点击保存按钮且应该为这个按钮添加一个save...

1133
来自专栏开发与安全

apache, php, mysql 安装过程命令记录

一、安装apache httpd-2.0.64 1. ./configure --prefix=/usr/local/apache2 2. make 3. ma...

2190
来自专栏技术记录

centOS7 mini配置linux服务器(二) 配置IP

1.登录root用户,输入指令  #ip addr 可以看到除lo外的属于你的网卡配置。 ? 2.输入 #cd /etc/sysconfig/network-...

2238
来自专栏拂晓风起

Hibernate配置access Hibernate 连接 access

1154
来自专栏Python、Flask、Django

flask项目使用第三方实现上传文件/图片的功能

1542

扫码关注云+社区

领取腾讯云代金券