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

文章目录

  • [publicPath 和 webpack_public_path 和 process.env.BASE_URL的区别和使用方法](#publicPath 和 webpack_public_path 和 process.env.BASE_URL的区别和使用方法)

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

1. publicPath

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

然后使用这个publicPath变量:

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

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

javascript 复制代码
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 变量值覆盖。
javascript 复制代码
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
javascript 复制代码
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 中设置,如下所示:
javascript 复制代码
__webpack_public_path__ = process.env.ASSET_PATH;

或者

javascript 复制代码
__webpack_public_path__ = window.staticResourceURLPrefix || "/";
方法2:在入口文件(如 main.js )中使用 ES6 模块导入。
  • 导入方式如下:
javascript 复制代码
// 入口文件.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 进行赋值,如下所示:

javascript 复制代码
// 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 )的最上面,如下所示:

javascript 复制代码
// main.js
import './public-path';
import './app';
相关推荐
luckyext23 分钟前
Postman用JSON格式数据发送POST请求及注意事项
java·前端·后端·测试工具·c#·json·postman
烛阴1 小时前
JavaScript 函数对象与 NFE:你必须知道的秘密武器!
前端·javascript
px52133441 小时前
Solder leakage problems and improvement strategies in electronics manufacturing
java·前端·数据库·pcb工艺
eli9601 小时前
node-ddk,electron 开发组件
前端·javascript·electron·node.js·js
全宝1 小时前
🔥一个有质感的拟态开关
前端·css·weui
老K(郭云开)1 小时前
最新版Chrome浏览器加载ActiveX控件技术--allWebPlugin中间件一键部署浏览器扩展
前端·javascript·chrome·中间件·edge
老K(郭云开)1 小时前
allWebPlugin中间件自动适应Web系统多层iframe嵌套
前端·javascript·chrome·中间件
银之夏雪2 小时前
Vue 3 vs Vue 2:深入解析从性能优化到源码层面的进化
前端·vue.js·性能优化
还是鼠鼠2 小时前
Node.js 的模块作用域和 module 对象详细介绍
前端·javascript·vscode·node.js·web
拉不动的猪2 小时前
刷刷题36(uniapp高级实际项目问题-1)
前端·javascript·面试