vue项目部署在二级目录下

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

但是会面临几个问题

  1. 服务器配置
  2. 前端静态资源路径配置
  3. 前端请求路径写法
  4. 前端路由配置

服务器配置

参考nginx等网络服务器的配置方法,以nginx为例,其实主要是对location属性的配置,一下链接可以参考,需要注意的是二级目录下接口的反向代理,挺麻烦的

Nginx之location详解_寰宇001的博客-CSDN博客_location nginxrootlocation中root指定的只是相对路径,需要和路径结合起来映射地址,比如location ^~/static/ {## 这里的root需要和路径结合使用,即是映射的文件位置为 /usr/alyingboy/static root /usr/alyingboy/; index index.html}此时我们访问 IP/static/a.css ,那么就会找到 /usr/alyingboy/static/a.cssaliasalias指定的是绝对路径,不会和lochttps://blog.csdn.net/qq_40907977/article/details/106815216

Nginx之location详解_寰宇001的博客-CSDN博客_location nginxrootlocation中root指定的只是相对路径,需要和路径结合起来映射地址,比如location ^~/static/ {## 这里的root需要和路径结合使用,即是映射的文件位置为 /usr/alyingboy/static root /usr/alyingboy/; index index.html}此时我们访问 IP/static/a.css ,那么就会找到 /usr/alyingboy/static/a.cssaliasalias指定的是绝对路径,不会和lochttps://blog.csdn.net/qq_40907977/article/details/106815216

前端静态资源路径配置

        修改webpack打包的资源路径

          publicPath: '/xxx',  //直接把二级目录写上就行

前端请求路径写法

        尽量使用绝对路径,如/a/b/c,这里的写法,影响服务器配置反向代理的写法

前端路由配置

        配置路由的时候,vue-router增加配置项,base:'/xxx',xxx为部署路径。同时mode尽量是hash,不然系统刷新可能会找不到页面,当然也可以不配置hash,使用history,但是就需要从服务器进行配置,我没有配置成功,配置成功后再更新吧。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值