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项目如何部署二级目录到服务器就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持芦苇派。
原创文章,作者:ECHO陈文,如若转载,请注明出处:https://www.luweipai.cn/html/1666346303/