当前位置: 首页 > article >正文

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.kler.cn/a/274566.html

相关文章:

  • 使用 Docker 打包和运行 Vue 应用
  • 0.gitlab ubuntu20.04 部署问题解决
  • API开发:Flask VS FastAPI
  • 电脑丢失dll文件一键修复的多种方法分析,电脑故障修复攻略
  • 鸿蒙开发(18)arkTS类型
  • 周末总结(2024/12/21)
  • 使用Vscode连接云进行前端开发
  • Java使用itextpdf往pdf中插入图片
  • nodejs 使用express插件multer文件上传,接收不到文件的bug
  • 未来汽车EE架构趋势
  • 数库据设计最佳实践
  • React——关于表单元素
  • C#,图论与图算法,计算无向连通图中长度为n环的算法与源代码
  • 湖北省地质灾害分布数据 崩塌滑坡泥石流空间分布地质灾害详查等数据集
  • Spark-Scala语言实战(3)
  • Linux:Gitlab:16.9.2 创建用户及项目仓库基础操作(2)
  • xAI开发的一款巨大型语言模型(HLM)--Grok 1
  • Hive 使用 LIMIT 指定偏移量返回数据
  • 力扣--回溯算法51.N皇后
  • Stable Diffusion WebUI 生成参数:高清修复/高分辨率修复(Hires.fix)
  • web前端之不一样的下拉菜单、不选中第一个元素的样式效果、伪类排除第一个元素、符号选择器、hover、not、first、child
  • 【AIGC调研系列】MetaGpt与AutoGpt相比有哪些优势和劣势
  • 微信小程序项目实战遇到的问题
  • 使用ES检索PDF等文档的全栈方案之前端demo(end)
  • Kafka整理-Kafka与传统消息队列系统(如RabbitMQ, ActiveMQ)的区别是什么?
  • Rust 中的 Vec<u8> 类型