vue项目如何部署二级目录到服务器

一般情况下，前端项目部署在各自端口根目录下。但是如果服务器端口限制等因素，多个项目共享一个端口，就需要部署在二级目录下。

场景：

比如说我有一个服务器，我想部署两个项目

http://www.xxxx.com/api

https://www.xxxx.com/restful

在vue.config.js中增加如下配置：

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

路由中配置

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

坑一：

配置路由的时候，vue-router增加配置项，base:'/xxx'，xxx为部署路径。同时mode尽量是hash，不然系统刷新可能会找不到页面，当然也可以不配置hash，使用history，有一个注意的事项就是会刷新当前页面404，不管是vue还是react都会“刷新当前页面404”，这是因为这种（history）模式会被错误的认为向服务端发出了真请求，但是其实这这是前端路由变化，后端自然也没做好相应你的处理，所以就404了，解决思路如下

# nginx.conf这里是需要部署的二级目录应用配置
 location /apiPage{
    alias /data/apiPage/;

index  index.html index.htm;
    try_files $uri $uri/ /apiPage/index.html;

}

以上这篇vue项目如何部署二级目录到服务器就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。