vue被部署到子（二级）目录

需求
有的时候，你的域名很珍贵，除了二级域名外。
你还可以将你的项目部署在服务器二级目录下，这样的话，就可以部署多个项目了。
比如说，我有一个域名为dshvv.com的服务器，我想部署两个项目：
12306项目：http://dshvv.com/12306
淘宝项目：http://dshvv.com/taobao

问题
普通项目不会有问题，
但是如果是单页项目，而且单页项目的路由用的是history模式，不管是vue还是react都会出现一个问题
那就是“刷新当前页面404”
这是因为这种（history）模式会被错误的认为向服务端发出了真请求，但是其实这这是前端路由变化，后端自然也没做好相应你的处理，所以就404了

解决
前端配置
vue.config.js增加如下配置：

publicPath: '/caspage/'

路由配置如下：

const router = new VueRouter({
  mode: 'history',
  base:'/caspage/',
  routes
})

 

后端nginx.conf配置如下：　　　

　　　# 首先给要部署的项目分配一个服务

　　server {
        listen 8001;
        location / {
            # vue h5 history mode 时配置
            try_files $uri $uri/ /index.html;
            root html/caspage;
            index index.html index.htm;
        }
    }

　　# 再到配置域名的主配置server上做反向代理　
    server {
        listen       80;
        server_name  localhost; 
        location / {
            root   html;
            index  index.html index.htm;
            # vue-router的history模式下，刷新页面404处理
            try_files $uri $uri/ /index.html;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

       

         

         # 这里是需要部署的二级目录应用配置

         location /cloudChartPage {

            alias /data/cloudChartPage/;

            index  index.html index.htm;

            try_files $uri $uri/ /cloudChartPage/index.html;

         }

    }

 

然后重新启动就行了
参考：https://www.cnblogs.com/liugx/p/9336176.html

nginx安装与配置
参考本文

 

如果二级页面刷新依然白屏
这样处理

   location /xxpage {
        alias /data/html/pagedir/;
        index  index.html;
        try_files $uri $uri/ @xxpage_action;
    }

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

 

项目代码就在根目录下

location / {
    try_files $uri $uri/ /index.html;
    index index.html index.htm;
}