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)
- - - （1）publicPath定义
    - （2）publicPath使用方法
    - - 方法1：静态文件使用publicPath。
        
        方法2：项目打包时使用publicPath
    - [（3）publicPath 和 process.env.BASE_URL 的区别](#（3）publicPath 和 process.env.BASE_URL 的区别)
    - （4）process.env.BASE_URL的其他使用
- [2. webpack_public_path](#2. webpack_public_path)
- - - [（1）webpack_public_path 定义](#（1）webpack_public_path 定义)
    - [（2）webpack_public_path 使用方法](#（2）webpack_public_path 使用方法)
    - - [方法1：在项目入口处（如 main.js 中）设置。](#方法1：在项目入口处（如 main.js 中）设置。)
        
        [方法2：在入口文件（如 main.js ）中使用 ES6 模块导入。](#方法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。

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';