解决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 条评论
登录 后参与评论

相关文章

来自专栏张戈的专栏

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

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

3386
来自专栏云计算教程系列

如何在Ubuntu 16.04上从源代码安装Go

Go是由Google开发的一种现代开源编程语言。它很简单,并且拥有一组强大的库和工具,可以轻松搭建可靠,高效的应用程序。

1443
来自专栏LinXunFeng的专栏

hexo+github 搭建个人技术博客

1263
来自专栏吴小龙同學

Android Studio Git 分支实践

新公司有些项目是用的 Git,以前公司都是 svn,为了练手 Git,我个人 APP 用到了,但是仅简单的 git pull/push 的使用,并未用到 G...

3055
来自专栏Python、Flask、Django

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

1222
来自专栏开发与安全

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

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

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

Windows Phone SDK 7.1.1 Update正式版发布

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

1737
来自专栏LIN_ZONE

laravel + vue +element + vux 初使用遇见的问题

之前,参加一个项目,中用的是 laravel5.4+vue+element+vux 刚开始用的时候,有点懵,记录下来与大家共勉

711
来自专栏技术记录

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

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

1928
来自专栏云计算教程系列

在腾讯云CVM上安装Apache

Apache HTTP服务器是世界上使用最广泛的Web服务器。它提供了许多强大的功能,包括可动态加载的模块,强大的媒体支持以及与其他流行软件的广泛集成。

2697

扫码关注云+社区