解决vuejs应用在nginx非根目录下部署时访问404的问题(一个域名多项目)

妖狐艹你老母 2023-01-19 07:13 4阅读 0赞

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

1、修改项目router配置，如下：  
![在这里插入图片描述][20210508143350198.png_pic_center]

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

2、修改build下静态资源路径前缀  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5_size_16_color_FFFFFF_t_70_pic_center]

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

3、执行vuejs打包：npm run build

确保打包后所有静态资源均是相对地址/vuejs-admin开头，比如：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5_size_16_color_FFFFFF_t_70_pic_center 1]

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

server {
        listen       80;
        server_name ******;
    
    
        location / {
            root /data/www/light_gift/gift-shop/dist;
            try_files $uri $uri/ /index.html last;
        }
    	#接口 代理  , 没有跨域问题可以不用加
        location /api {
            proxy_pass   http:/******.com;
        }
    
        location ^~/admin {
            alias /data/www/light_gift/back_web/dist/;
            try_files $uri $uri/ @rewrites; 
        }
    
        location @rewrites {
            rewrite ^/(admin)/(.+)$ /$1/index.html last;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

[20210508143350198.png_pic_center]: /images/20221021/453c583f9d4344928d828f76f7748c2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221021/0d987d4accbb415982188c7c45d5638e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221021/377d3c4259fa45cfa1960816123d79a0.png