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;
    }