szs 发表于 2018-11-8 07:54:23

vue多项目nginx部署

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

网站目录结构如:
  

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

项目环境
  

系统平台:
  
CentOS Linux>  
nginx version: nginx/1.12.2
  

排查过程
  前端在打包静态文件的时候,只把assetsPublicPath: '/wap' 修改为对应的子目录
  那么尝试nginx各种写法,均未成功。
  只写这个,全部指向/
  

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

错误日志  
2018/04/13 08:10:16 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;
  indexindex.html index.htm;
  try_files $uri $uri/ @router;
  }
  

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

  

  同样错误,全部指向/
  

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

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

错误日志  
2018/04/13 08:27:54 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;
  indexindex.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;
  indexindex.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]
查看完整版本: vue多项目nginx部署