栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 系统运维 > 运维 > Linux

vue项目部署在二级目录下

Linux 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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,但是就需要从服务器进行配置,我没有配置成功,配置成功后再更新吧。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/841899.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号