vue如何部署二级目录_vue 二级目录

有的时候，我们的域名很珍贵，除了二级域名外。
我们不仅可以把项目部署到当前域名下 也可以部署到二级目录下，这样的话，就可以部署多个项目了。
比如说，我有一个域名为sslcsq.com的服务器，我想部署两个项目：
京东项目：http://sslcsq.com/jingdong
淘宝项目：http://sslcsq.com/taobao

说一下这里会遇到得问题

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

如何解决

前端配置（前端看这就行了，后面找后台配置）
在vue.config.js中增加如下配置：

publicPath: '/taobao/'                   这里就是配置的二级目录
1

路由配置如下：

const router = new VueRouter({
  mode: 'history',
  base:'/taobao/',                          这里就是配置的二级目录
  routes
})
1
2
3
4
5

后端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;
     }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

新启动然后访问就可以http://sslcsq.com/taobao 或者 http://sslcsq.com/京东 看你的二级目录配置的什么了