nginx部署html5项目,vue多项目nginx部署

vue多项目nginx部署

原创

ljpwinxp2018-04-13 09:21:31©著作权

©著作权归作者所有：来自51CTO博客作者ljpwinxp的原创作品，如需转载，请注明出处，否则将追究法律责任

https://blog.51cto.com/191226139/2102483

# 项目目的

实现服务端同一域名下部署多个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文件修改

添加

2. config/index.js文件修改

修改 assetsPublicPath: '/子目录名/'

3.src/router/index.js文件修改

添加 base: '/子目录名/'

```

## Nginx配置

```

location /子目录名 {

try_files $uri $uri/ @router;

}

location @router {

rewrite ^.*$ /子目录名/index.html last;

}

```


成功。

小坑坑，大家注意即可，并不是什么都是运维的问题，更加需要大家一起合作解决问题。这才是团队。

1赞

收藏

评论