vue多项目nginx部署

最新推荐文章于 2025-08-22 15:10:27 发布

weixin_34319999

最新推荐文章于 2025-08-22 15:10:27 发布

阅读量118

点赞数

CC 4.0 BY-SA版权

文章标签：运维 javascript 前端 ViewUI

原文链接：http://blog.51cto.com/191226139/2102483

本文介绍如何在同一域名下部署多个Vue项目，通过调整前端路由设置和优化Nginx配置实现子目录访问，解决路径指向问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目目的

实现服务端同一域名下部署多个vue项目。

网站目录结构如：

   根/
    ├── index.html
    ├── mms
    └── wap

项目环境

系统平台：
CentOS Linux release 7.4.1708 (Core)       内核  3.10.0-693.el7.x86_64
nginx version: nginx/1.12.2

排查过程

前端在打包静态文件的时候，只把assetsPublicPath: '/wap' 修改为对应的子目录

那么尝试nginx各种写法，均未成功。

只写这个，全部指向/

        location /wap {
                try_files $uri $uri/ /wap/index.html;

错误日志
2018/04/13 08:10:16 [error] 74906#0: *8 open() "/usr/share/nginx/html/static/js/index.b5c514831ef6db6a3e00.js" failed (2: No such file or directory), client: 192.168.10.136, server: _, request: "GET /static/js/index.b5c514831ef6db6a3e00.js HTTP/1.1", host: "192.168.10.247", referrer: "http://192.168.10.247/wap/"

这种写法，内部500 Internal Server Error

        location /wap {
                root /usr/share/nginx/html/wap;
                index  index.html index.htm;
                try_files $uri $uri/ @router;
                }

        location @router {
                rewrite ^.*$ /wap/index.html last;
                }

同样错误，全部指向/

        location /wap {
                root /usr/share/nginx/html/wap;
                index  index.html index.htm;
                try_files $uri $uri/ @router;
                }

        location @router {
                rewrite ^.*$ /index.html last;
                }

错误日志
2018/04/13 08:27:54 [error] 76039#0: *42 open() "/usr/share/nginx/html/static/js/index.e63d3efadf103006619e.js" failed (2: No such file or directory), client: 192.168.10.136, server: _, request: "GET /static/js/index.e63d3efadf103006619e.js HTTP/1.1", host: "192.168.10.247", referrer: "http://192.168.10.247/wap/"

这种写法，也是内部500 Internal Server Error

 location /wap {
                root /usr/share/nginx/html/wap;
                index  index.html index.htm;
                try_files $uri $uri/ /wap/index.html;
                }

        location @router {
                rewrite ^.*$ /index.html last;
                }

内部500 Internal Server Error

        location /wap {
                root /usr/share/nginx/html/wap;
                index  index.html index.htm;
                try_files $uri $uri/ /wap/index.html;
                }

        location @router {
                rewrite ^.*$ /wap/index.html last;
                }

因为我也不懂前端的事情，查了下资料，应该是开发那边的环境生成的路由有误。

修改vue生成参数

1. index.html文件修改
    添加 <meta base="/子目录名/">

2. config/index.js文件修改
    修改 assetsPublicPath: '/子目录名/'

3.src/router/index.js文件修改
    添加 base: '/子目录名/'

Nginx配置

        location /子目录名 {
                try_files $uri $uri/ @router;
                }

        location @router  {
                rewrite ^.*$ /子目录名/index.html last;
                }

成功。