publicPath 和 __webpack_public_path__ 和 process.env.BASE_URL的区别和使用方法

文章目录

  • publicPath 和 __webpack_public_path__ 和 process.env.BASE_URL的区别和使用方法
    • 1. publicPath
        • (1)publicPath定义
        • (2)publicPath使用方法
            • 方法1:静态文件使用publicPath。
            • 方法2:项目打包时使用publicPath
        • (3)publicPath 和 process.env.BASE_URL 的区别
        • (4)process.env.BASE_URL的其他使用
    • 2. __webpack_public_path__
        • (1)__webpack_public_path__ 定义
        • (2)__webpack_public_path__ 使用方法
            • 方法1:在项目入口处(如 main.js 中)设置。
            • 方法2:在入口文件(如 main.js )中使用 ES6 模块导入。

publicPath 和 webpack_public_path 和 process.env.BASE_URL的区别和使用方法

1. publicPath

(1)publicPath定义
  • publicPath 被称为公共路径,是 webpack 提供的一个为项目中所有资源指定一个基础路径的配置,用于在构建项目时设置路径值。
  • 在vue中的项目中,一般静态文件路径设置和项目打包部署时都会用到publicPath。
(2)publicPath使用方法
方法1:静态文件使用publicPath。
  • 如果项目里的静态文件都放在public文件中,则要使用publicPath这个变量,防止打包后静态文件找不到。需要通过绝对路径来引用它们,因为任何放置在 public 文件夹的静态资源都会被简单的复制,而不经过 webpack。
data() {return {publicPath: process.env.BASE_URL;}
}

然后使用这个publicPath变量:

<img :src="`${publicPath}`myImg.png">
方法2:项目打包时使用publicPath
  • 如果把开发服务器设在根路径,可以使用一个条件式的值,例如:

这里判断是否是生产环境,如果是生产环境则前面的部署路径加上 /nbgl/,如果不是生产环境则默认使用根路径 / 。publicPath 在生产环境中经常配合前端服务器的nginx代理使用。如下所示:

module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '/nbgl/' : '/'
}
(3)publicPath 和 process.env.BASE_URL 的区别
  • 如果在 vue.config.js 里面设置了 publicPath,则 process.env.BASE_URL 其实就是 publicPath,因为
    process.env.BASE_URL 的值会被vue.config.js中的 publicPath 变量值覆盖。
module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '/nbgl/' : '/',
}
  • 如果在vue.config.js 中没有设置publicPath,则process.env.BASE_URL的值还是默认值,默认值是根路径 / 。
(4)process.env.BASE_URL的其他使用
  • 在vue路由的配置项中使用 process.env.BASE_URL
const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes,
})
  • mode: history 表示路由不再显示 #,例如:http://localhost:8080/user/list
  • base 表示基本路由请求路径,例如:base: ‘/nbgl/’,表示项目部署在nbgl目录下,vue的所有路由前面都会自动加上 /nbgl

2. webpack_public_path

(1)webpack_public_path 定义
  • webpack_public_path 是 webpack 暴露的一个全局变量,用于在运行时设置 publicPath,用于即时设置公共路径值。
(2)webpack_public_path 使用方法
方法1:在项目入口处(如 main.js 中)设置。
  • 在 main.js 中设置,如下所示:
__webpack_public_path__ = process.env.ASSET_PATH;

或者

__webpack_public_path__ = window.staticResourceURLPrefix || "/";
方法2:在入口文件(如 main.js )中使用 ES6 模块导入。
  • 导入方式如下:
// 入口文件.js
import './public-path';
import './app';

webpack_public_path 的赋值是在导入后进行,即 import ‘./public-path’; 执行后对 webpack_public_path 进行赋值,所以必须将 webpack_public_path 的赋值移至自己的专属模块(如与 main.js 同级的 public-path.js 中),在 public-path.js 中对 webpack_public_path 进行赋值,如下所示:

// public-path.js
(function() {if (window.__POWERED_BY_QIANKUN__) {if(process.env.NODE_ENV	 === 'development') {__webpack_public_path__ = `localhost:${process.env.VUE_APP_PORT}${process.env.BASE_URL}`;return;}__webpack_public_path__ = window.INJECTED_PUBLIC_PATH_BY_QIANKUN__;}
})();

然后再将 public-path.js 导入到入口文件( 如 main.js )的最上面,如下所示:

// main.js
import './public-path';
import './app';

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

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

相关文章

jvm的垃圾回收器以及触发full gc的场景

JVM&#xff08;Java虚拟机&#xff09;的垃圾回收器有很多种&#xff0c;主要包括以下几种&#xff1a; Serial收集器&#xff1a;串行收集器是最古老、最稳定的收集器。它使用单个线程进行垃圾收集工作&#xff0c;在进行垃圾回收时会暂停所有用户线程。 ParNew收集器&#…

Nebula Graph-01-Nebula Graph简介和安装以及客户端连接

前言 NoSQL 数据库 图数据库并不是可以克服关系型数据库缺点的唯一替代方案。现在市面上还有很多非关系型数据库的产品&#xff0c;这些产品都可以叫做 NoSQL。NoSQL 一词最早于上世纪 90 年代末提出&#xff0c;可以解释为“非 SQL” 或“不仅是 SQL”&#xff0c;具体解释要…

使用flatten-maven-plugin时更换版本号步骤

flatten-maven-plugin作用和配置 略 第一步: 执行mvn命令,更新.flattened-pom.xml mvn clean package -Drevision"1.0.1-snapshot" 版本号如果有-,则必须加上双引号 第二步: 修改POM文件中版本号reversion 第三步: reload all maven projects

查找众数及中位数 - 华为OD统一考试(C卷)

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 100分 题解&#xff1a; Java / Python / C 题目描述 众数是指一组数据中出现次数量多的那个数&#xff0c;众数可以是多个。 中位数只是指把一组数据从小到大排列&#xff0c;最中间的那个数&#xff0c;如果这组数…

整蛊小教程|让朋友手足无措的电脑自动关机

前言 这几天讲到shutdown关机命令&#xff0c;于是就出现了整蛊类的电脑教程。 这个故事我记得很清楚&#xff1a;在2012年的春天……当时的小白对电脑还不是很熟悉。某一天跟着朋友去网吧上网&#xff0c;这时候突然有个朋友发来一个.bat的文件&#xff0c;说双击打开有惊喜…

单片机烧录方式,JTAG,ISP,SWD,

常见的词汇 参考 ISP&#xff1a;In System Programing&#xff0c;在系统编程 IAP&#xff1a;In Application Programing&#xff0c;在应用编程 ICP&#xff1a;In Circuit Programing&#xff0c;在电路编程 ICSP全称是In Circuit Serial Programming JTAG(Joint Test Act…

集合深入------理解底层。

集合的使用 前提&#xff1a;栈、堆、二叉树、hashcode、toString()、quesalus()的知识深入和底层理解。 1、什么是集合 集合就是咋们所说的容器 ​ 前面我们学习过数组 数组也是容器 ​ 容器&#xff1a;装东西的 生活中有多少的容器呀? 水杯 教室 酒瓶 水库 只要是…

Modbus TCP转Profinet网关如何实现Modbus主站与多设备通讯

在工业控制领域中&#xff0c;Modbus TCP转Profinet网关&#xff08;XD-ETHPN20&#xff09;扮演着连接不同设备间通讯的重要角色。当将Modbus主站与十几台服务器进行通讯时&#xff0c;通过modbus tcp转profinet网关&#xff08;XD-ETHPN20&#xff09;设备将不同协议间的数据…

[LLM]大模型八股知识点(一)

基础面 1 目前主流的开源模型体系有哪些&#xff1f; 目前主流的开源LLM&#xff08;语言模型&#xff09;模型体系包括以下几个&#xff1a; GPT&#xff08;Generative Pre-trained Transformer&#xff09;系列&#xff1a;由OpenAI发布的一系列基于Transformer架构的语言…

关于OceanBase中旁路导入的应用分享

背景 前段时间&#xff0c;在用户现场协助进行OceanBase的性能测试时&#xff0c;我注意到用户常常需要运用 insert into select 将上亿行的数据插入到一张大宽表里&#xff0c;这样的批量数据插入操作每次都需要耗时半个小时左右。对这一情况&#xff0c;我提议用户尝试采用旁…

Class Re-Activation Maps for Weakly-Supervised Semantic Segmentation

摘要&#xff1a; 提取类激活映射(CAM)可以说是为弱监督语义分割(WSSS)生成伪掩码的最标准步骤。然而&#xff0c;我们发现伪掩码不理想的关键是在CAM中广泛使用的二进制交叉熵损失(BCE)。具体来说&#xff0c;由于BCE的池化方式是对类别求和&#xff0c;CAM中的每个像素可能对…

Java | 时间日期API

大家好&#xff0c;我是程序员影子 一名致力于帮助更多朋友快速入门编程的程序猿 今天来聊一聊关于Java 中的时间日期API 一、使用LocalDate和LocalTime Java 8 引入了java.time包&#xff0c;其中LocalDate和LocalTime类用于处理日期和时间。 import java.time.LocalDate…

Linux课程____进程管理

记录工作日志 script 240319.log CTRLd 退出 cat 240319.log //查看 一、查看进程 1.静态 ps -aux ps -elf 2.动态 top 3.pgrep 查看特定条件的进程 pgrep -l “log” pgrep -l "ssh" pgrep -l -U redhat 4.pstree 查看进程树 pstree -aup 所有…

【Linux更新驱动、cuda和cuda toolkit】

目录 1. 更新显卡驱动1.1. 查看当前显卡驱动版本1.2. 删除原始显卡驱动1.3. 删除CUDA Toolkit1.4. 在NVIDIA官网找到2080Ti对应的最新驱动程序 2. 更新CUDA Toolkit2.1. 下载CUDA Toolkit2.2. 安装.run2.3. 添加环境变量2.4. 检查是否安装好了 最近需要更新服务器的显卡驱动和C…

10 Internet基本服务(3)

1.SMTP 邮件传递过程3 阶段 &#xff08;1&#xff09;连接建立阶段 在这一阶段&#xff0c;SMTP 客户机请求与服务器的25 端口建立一个TCP 连接。一旦连接建立&#xff0c;SMTP 服务器和客户机就幵始相互通拫自己的域名&#xff0c;同时确认对方的域名&#xff1b;&a…

目标检测——PP-YOLOv2算法解读

PP-YOLO系列&#xff0c;均是基于百度自研PaddlePaddle深度学习框架发布的算法&#xff0c;2020年基于YOLOv3改进发布PP-YOLO&#xff0c;2021年发布PP-YOLOv2和移动端检测算法PP-PicoDet&#xff0c;2022年发布PP-YOLOE和PP-YOLOE-R。由于均是一个系列&#xff0c;所以放一起解…

Fork - 将 GitHub 的某个特定仓库复制到自己的账户下

Fork - 将 GitHub 的某个特定仓库复制到自己的账户下 1. ForeverStrongCheng/OpenCV-tutorials2. Fork -> ForeverStrongCheng/R2CNN_Faster-RCNN_TensorflowReferences 访问仓库页面&#xff0c;点击 Fork 按钮创建自己的仓库。 Fork 是将 GitHub 的某个特定仓库复制到自己…

BetterDisplay Pro for Mac(显示器校准软件) v2.0.11激活版

BetterDisplay Pro是一款由waydabber开发的Mac平台上的显示器校准软件&#xff0c;可以帮助用户调整显示器的颜色和亮度&#xff0c;以获得更加真实、清晰和舒适的视觉体验。 软件下载&#xff1a;BetterDisplay Pro for Mac v2.0.11激活版 以下是BetterDisplay Pro的主要特点&…

【No.8】蓝桥杯工具函数模板|迭代器|vector|queue|map|set|银行问题|费里的语言|快递分拣(C++)

迭代器讲解线性表的使用队列的使用集合&#xff08;set&#xff09;的使用映射&#xff08;map&#xff09;的使用 迭代器&#xff08;Iterator&#xff09; 迭代器是 C 的知识&#xff0c;但是下面讲容器就要用到这一点&#xff0c;所以我们必须要提前讲一下。迭代器的知识点…

ideaSSM 工程车辆人员管理系统bootstrap开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 idea 开发 SSM 工程车辆人员管理系统是一套完善的信息管理系统&#xff0c;结合SSM框架和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具 有完整的源代码和数据库&…