Vue CLI 设置 publicPath:打包后的应用可部署在任意路径

前言

领导要重新部署多个应用环境,且不受路径层级影响。
于是找到了 Vue CLI 配置 publicpath

配置说明

下图所示:

  1. '/' :默认值,应用部署在根路径上;
  2. './':注意前面加了一个点,应用可部署在任意路径上。因为 . 点代表相对路径
  3. '':空字符串,同 2 是一个意思,代表相对路径。接着往下看就知道为啥可为空字符串
    在这里插入图片描述

打包

图左侧:相对路径,可部署在任意路径下。不带前缀,这就是为啥设置为空同样可行;
图右侧:绝对路径,只能在路径下,否则找不到相关文件;
在这里插入图片描述

总结

请仔细查看上图,一切尽在图中!强烈建议自己动手实践,会有更深刻的认知~

扩展

1. router 限制

Vue CLI 配置 publicpath下还有一段黄色标注。

  1. Vue Router mode,为 history 无效,建议使用默认值 hash
  2. 多应用暂没使用,此处不赘述;
    在这里插入图片描述

2. 与配置 outputDir 关联关系

注意还有一个配置 outputDir,不要弄混淆了!!
outputDir 的默认值是 dist 。打包生成的文件放在 Vue工程 根目录下,文件夹名称就是 dist
在这里插入图片描述

配置一

  • 默认值,无需配置;
  • 应用必须部署在根路径下;
  • 打包后的文件在 Vue工程 根目录文件夹 dist 下;
module.exports = {publicPath: '/', // 注意这里没有点 .outputDir: 'dist' // 注意结尾无 /
}

配置二

module.exports = {publicPath: './', // 注意这里多个点 .outputDir: 'dist/route/test' // 注意结尾无 /
}
  • publicPath 值开头是 ./ ,说明可部署任意路径下;
  • publicPath 值结尾是 / ,表示某路径下outputDir 值结尾没有 / ,说明是文件夹名称
  • 打包后的文件在Vue 工程dist/route/test下;
    在这里插入图片描述
    dist 文件夹下的文件放入部署环境,打开是 route/test/index.html
    在这里插入图片描述
  • 将部署路径 route/ 改为 route2/同样能访问,只要 publicPath任意路径就行;
  • /route/test/ 下的文件放在其它路径下,url 路径名称对应也可访问;
  • outputDir 仅仅是打包后的文件存放路径,与部署路径无关
    在这里插入图片描述

配置三

module.exports = {publicPath: '/route/test/', // 注意这里没有点 .outputDir: 'dist/route/test' // 注意结尾无 /
}
  • publicPath 值开头是 / ,这就限制了部署路径,必须在部署环境的根路径 /route/test 文件夹下;
  • publicPath 值结尾是 / ,表示某路径下outputDir 值结尾没有 / ,说明是文件夹名称
  • 打包后的文件在Vue 工程dist/route/test下;
    在这里插入图片描述
    部署环境下打开是 route/test/index.html
    在这里插入图片描述
  • 将部署路径 route/ 改为 route2/只能访问 index.html,相关文件就报 404
  • 例如 test.js ,它被限制在部署环境根路径 /route/test/ 下,/route2/test/ 就找不到;
  • outputDir 仅仅是打包后的文件存放路径,与部署路径无关

在这里插入图片描述

配置四

module.exports = {publicPath: './route/test/', // 注意这里多个点 .outputDir: 'dist/route/test' // 注意结尾无 /
}
  • publicPath 值开头是 ./ ,说明可部署任意路径下的 /route/test/ 下;

  • publicPath 值结尾是 / ,表示某路径下outputDir 值结尾没有 / ,说明是文件夹名称

  • 打包后的文件在Vue 工程dist/route/test下;
    在这里插入图片描述

  • 部署环境下打开是 route/test/index.html

  • 但只能访问 index.html,相关文件就报 404,;

  • 例如 test.js ,套了两层 route/test/,第一层 route/test/是部署路径,第二次是配置的 publicPath 路径;

  • 正确配置参考二和三,但建议使用配置三(有限制),推荐配置二;

  • outputDir 仅仅是打包后的文件存放路径,与部署路径无关
    在这里插入图片描述

3. index.html 引入静态文件

讲到这里,我们已经深刻的理解,想要应用部署在任意路径下,开头必须是 ./空字符串。同理,index.html 文件中引入的静态文件路径是:

// 正确
<script src="./tree.js"></script>// 正确
<script src="tree.js"></script>// 正确,参考https://cli.vuejs.org/zh/guide/html-and-static-assets.html#public-%E6%96%87%E4%BB%B6%E5%A4%B9
<script src="<%= BASE_URL %>tree.js"></script>// 应用部署在非根路径下,错误,已限制在根路径下
<script src="/tree.js"></script>

报错,当前应用在 dist 文件夹下找不到。tree.js限制在根路径。
在这里插入图片描述

4. img 标签的图片引用

这里仅说明放在 public 文件夹下的图片在 img 标签中的使用。多说一句, 打包后的public 文件夹文件仅仅是拷贝到默认 dist 目录下。与打包后 src/assets 文件夹下的图片被编译是不同的。
同理,

// 正确
<img class="user-icon" src="./static/images/login.png" />// 正确
<img class="user-icon" src="static/images/login.png" />// 错误:应用部署在非根路径下是找不到的,已限制在根路径下
<img class="user-icon" src="/static/images/login.png" />

5. background-image url 图片引用

同样,这里仅说明放在 public 文件夹下的图片在 background-image url 中的使用。
我们是可以使用 src/assets 文件夹下的图片,但有时就是有用 public 文件夹下图片的场景。便于运维同事,现场更换图片…

方式一

最简单的方式,除了路径有点长…应用部署在任意路径下也可行,亲测有效,哈哈哈…

// 正确:你没看错...就是这么长
background-image: url('../../../public/static/images/login.png');

以下都是错的

// 错误:在 src/static/images 路径下找图片。被webpack解析为 require(src/static/images/login.png) 动态引入
background-image: url('~@/static/images/login.png');// 错误:在 src/static/images 路径下找图片
background-image: url('/static/images/login.png');// 错误:相对路径,在当前 .vue 文件所在路径下找图片,例如文件在 src/views 下。则在 src/views/static/images 下找图片
background-image: url('./static/images/login.png');// 错误:同上
background-image: url('static/images/login.png');

最后,本小节的知识点较多,需要多多消化~可查看 Vue CLI 处理静态资源 去理解。
关于 何时使用 public 文件夹,Vue CLI 也给出了解释。下面是截图,以免你不想进入第三方链接:
在这里插入图片描述

方式二

网上也找到比较复杂的用 CSS 变量 方式,这里不赘述,可 参考;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/238455.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法基础之扩展欧几里得算法

扩展欧几里得算法 核心思想&#xff1a;裴蜀定理 : 欧几里得算法: 辗转相除法求最大公约数 传入参数(int a,int b,int &x,int &y) 递归(int b,int a%b,int y,int x) xy换位置 方便计算(推公式) #include<iostream>#include<algorithm>using namespac…

Java 封装通用HTTP返回结果类

1.返回结果类: /*** 响应结果* param <T>*/ public class ResponseBean<T> {public ResponseBean() {}/*** 时间戳*/ApiModelProperty(value "时间戳", name "timestamp")private String timestamp DateUtils.dateToStr(new Date(), DateU…

移动零(双指针)

1、题目 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,0,0]示例 2: 输入: nums […

yolo-nas无人机高空红外热数据小目标检测(教程+代码)

前言 YOLO-NAS是目前最新的YOLO目标检测模型。从一开始&#xff0c;它就在准确性方面击败了所有其他 YOLO 模型。与之前的 YOLO 模型相比&#xff0c;预训练的 YOLO-NAS 模型能够以更高的准确度检测更多目标。但是我们如何在自定义数据集上训练 YOLO NAS&#xff1f; 这将是我…

JavaScript高级 class类篇

1、class类的实现 class的基本结构 定义及用法&#xff1a;class关键字定义类&#xff0c;创建构造函数&#xff0c;类名首字母大写 语法结构&#xff1a; class 类名{constructor(参数1,参数2){// 构造函数体&#xff0c;添加实例对象成员}方法名(){// 添加原型对象成员}s…

深入理解Java虚拟机jvm-内存分配与回收

对象优先在Eden分配 新生代总可用空间Eden区1个Survivor区&#xff08;from区&#xff09;的总容量 大多数情况下&#xff0c;对象在新生代Eden区中分配当Eden区没有足够空间进行分配时&#xff0c;虚拟机将发起一次Minor GC存活下来的对象放入Survivor当对象无法放入Survivor空…

效果图云渲染是什么意思?如何渲染出照片级别的效果图?

​在当前的建筑规划、室内装修以及电影视效制作等行业内&#xff0c;制作高质量的效果图起着至关重要的作用&#xff0c;因为它能够给予观众或客户极为逼真和吸引人的视觉体验。在此篇文章中&#xff0c;我们将深入了解什么是云端效果图渲染&#xff0c;并探讨如何运用Renderbu…

MySQL 分表真的能提高查询效率?

背景 首先我们以InnoDB引擎&#xff0c;BTree 3层为例。我们需要先了解几个知识点&#xff1a;页的概念、InnoDB数据的读取方式、什么是树搜索&#xff1f;、一次查询花费的I/O次数&#xff0c;跨页查询。 页的概念 索引树的页&#xff08;page&#xff09;是指存储索引数据…

7-1 建立二叉搜索树并查找父结点(PTA - 数据结构)

按输入顺序建立二叉搜索树&#xff0c;并搜索某一结点&#xff0c;输出其父结点。 输入格式: 输入有三行&#xff1a; 第一行是n值&#xff0c;表示有n个结点&#xff1b; 第二行有n个整数&#xff0c;分别代表n个结点的数据值&#xff1b; 第三行是x&#xff0c;表示要搜索值…

Kylin基础知识点解析与应用探索

目录 学习目标&#xff1a; 学习内容&#xff1a; 学习时间&#xff1a; 学习产出&#xff1a; Kylin简介 什么是Kylin Kylin的历史和发展 Kylin在大数据领域的地位和作用 Kylin架构 Kylin的组成部分和模块 Kylin的工作原理和流程 Kylin与其他大数据组件的关系和集成 Kylin功能…

Java8为什么要引入流Stream API

Java8为什么要引入流Stream API Java 8引入流&#xff08;Stream&#xff09;API的主要原因是为了提供一种更高效、更简洁、更易于阅读和维护的方式来处理数据集合&#xff0c;尤其是在处理大量数据时。流API引入了一种新的抽象层&#xff0c;使得数据处理操作可以更加直观和函…

链接未来:深入理解链表数据结构(二.c语言实现带头双向循环链表)

上篇文章简述讲解了链表的基本概念并且实现了无头单向不循环链表&#xff1a;链接未来&#xff1a;深入理解链表数据结构&#xff08;一.c语言实现无头单向非循环链表&#xff09;-CSDN博客 那今天接着给大家带来带头双向循环链表的实现&#xff1a; 文章目录 一.项目文件规划…

STM32F072 CAN and USB

1 通用描述 1.1 STM8 MOSTek 6502 -> ST7 -> STM8 STM8型号单片机分为STM8A、STM8L、STM8S三个系列。 STM8A&#xff1a;汽车级应用 STM8L&#xff1a;超低功耗MCU STM8S&#xff1a;标准系列 1.2 STM32 - F1系列用的最多&#xff0c;最大工作频率72MHz - STM32固件库&am…

Java商城免 费 搭 建:VR全景到SAAS,各种模式一网打尽!

一、技术选型 java开发语言&#xff1a;java是一种跨平台的编程语言&#xff0c;适用于大型企业级应用开发。使用java开发直播商城可以保证系统的稳定性和可扩展性。 spring boot框架&#xff1a;spring boot是一个快速构建spring应用的框架&#xff0c;简化了开发过程&#xf…

SpringMVC系列之技术点定向爆破一

对SpringMVC的技术点进行逐个拆解&#xff0c;定向爆破。 DispatcherServlet详解 DispatcherServlet中init-param的配置 DispatcherServlet负责接收除“.jsp”外的所有请求并交给Spring处理。因此DispatcherServlet需要优先启动。同时需要加载spring容器的配置&#xff0c;目…

找出将要运行的命令的版本

which 回想一下whereis命令&#xff0c;以及用-b选项只查询KWord的二进制文件信息时发生的情况。 $ whereis -b kword kword: /usr/bin/kword /usr/bin/X11/kword 在两个位置都有KWord的可执行文件。但是哪一个文件会先运行呢&#xff1f;运行which命令就可以得到答案。 $ whi…

导入conda虚拟环境的lib

用 conda 虚拟环境跑代码&#xff0c;import scipy 时报错&#xff1a; ImportError: /lib64/libstdc.so.6: version GLIBCXX_3.4.29 not found (required by /data/itom/miniconda3/envs/cu116_pt1131/lib/python3.9/site-packages/scipy/spatial/_ckdtree.cpython-39-x86_64…

人工智能对网络安全的影响

技术的快速发展带来了不断增长的威胁环境&#xff0c;网络犯罪分子和恶意行为者利用我们互联世界中的漏洞。在这个数字时代&#xff0c;数据泄露和网络攻击呈上升趋势&#xff0c;仅靠传统的安全措施已经不够了。人工智能 &#xff08;AI&#xff09; 的进步彻底改变了网络安全…

165. 小猫爬山(DFS之剪枝与优化)

165. 小猫爬山 - AcWing题库 翰翰和达达饲养了 N 只小猫&#xff0c;这天&#xff0c;小猫们要去爬山。 经历了千辛万苦&#xff0c;小猫们终于爬上了山顶&#xff0c;但是疲倦的它们再也不想徒步走下山了&#xff08;呜咕>_<&#xff09;。 翰翰和达达只好花钱让它们…

LeetCode 1671. 得到山形数组的最少删除次数

一、题目 1、题目描述 我们定义 arr 是 山形数组 当且仅当它满足&#xff1a; arr.length > 3存在某个下标 i &#xff08;从 0 开始&#xff09; 满足 0 < i < arr.length - 1 且&#xff1a; arr[0] < arr[1] < ... < arr[i - 1] < arr[i]arr[i] > …