iview-admin nginx 部署子目录

例如访问url为 http://www.myapp.com/my-app/

1、修改项目下的 vue.config.js

      部署环境改为子目录的名称

2、nginx配置

     这里使用alias ，不能用root

server {
  listen       8080;
  server_name  www.xhl.com;

  location /my-app {
	  alias   /var/myapp/dist/;	
  }
}

3、alias和root的区别

#当客户端请求是  /my-app/js/util.js 时

location /my-app {
	root   /var/myapp/dist/;	
}

#root映射结果为    /var/myapp/dist/my-app/js/util.js
#(实际util.js 文件是在dist/js/目录下，这样会访问不到资源)

location /my-app {
	alias  /var/myapp/dist/;	
}

#alias映射结果为   /var/myapp/dist/util.js

4、前后端分离，正式环境nginx配置

设置正式环境下后端接口调用，src/config/index.js 中的baseUrl.pro

 baseUrl: {
    dev: 'http://127.0.0.1:8090/xhl/',
    pro: 'http://www.xhl.com/abc/' 
  }

配置nginx，前后端程序在同一台服务器上，所以直接用了127.0.0.1

location /abc/ {
	proxy_pass http://127.0.0.1:8090/xhl/;
 }

5、刷新后404的问题，模式设置为hash可解决，路径中会有#
通过history api，我们丢掉了丑陋的#，怕刷新，f5，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的。

在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题.但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来