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

相关文章

来自专栏云计算教程系列

在腾讯云CVM上安装Apache

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

3247
来自专栏Python、Flask、Django

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

1412
来自专栏vue学习

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

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

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

Windows Phone SDK 7.1.1 Update正式版发布

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

1807
来自专栏编程

爬虫基本原理完全梳理及常用解析方式

什么是爬虫:即网络爬虫,可以理解为在网络上爬行的一只蜘蛛,互联网可以比喻为一张大网,一只蜘蛛在爬行时遇到了所需的资源就可以把它爬取下来。简单来说,爬虫就是请求网...

1947
来自专栏bboysoul

nginx开启目录浏览功能(autoindex)

这个博客其实是延迟了很久的一篇博客,暑假的时候做centos镜像站的时候想写的,nginx默认不开启这个功能,开启这个功能之后可以把它当文件浏览器使用

1162
来自专栏张戈的专栏

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

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

3456
来自专栏java系列博客

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

2465
来自专栏开发与安全

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

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

2060
来自专栏LIN_ZONE

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

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

831

扫码关注云+社区