iview-admin nginx 部署子目录

布满荆棘的人生 2021-06-11 15:13 540阅读 0赞

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYWh1YWxl_size_16_color_FFFFFF_t_70][]

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来

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYWh1YWxl_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYWh1YWxl_size_16_color_FFFFFF_t_70]: /images/20210605/13b4a4c79d864d568336832a3f7396a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYWh1YWxl_size_16_color_FFFFFF_t_70 1]: /images/20210605/d93f0ce91a9a4033a487051e2957a3be.png