记一次webpack配置文件外置

前言

众所周知,webpack配置环境变量文件,是根据打包命令寻找对应的环境变量文件,从而获取接口地址。所以触发时机是在每次打包的时候,接口地址才会被打包进去,无法自由修改。
本次要求一次打包后,修改接口地址的文件,刷新页面可达到更新接口地址。

有两种方法,一是安装generate-asset-webpack-plugin插件,二是把接口地址暴露在window成为全局变量

方法(一) 安装generate-asset-webpack-plugin插件

首先安装插件

npm install generate-asset-webpack-plugin -S -D

在build文件夹下,新建一个文件generate-asset.config.js

const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const config = require('../config/app.config');function createServerConfig(compilation) {return JSON.stringify(Object.assign({_hash: compilation.hash,},config))
}
//生成app-config.json文件
module.exports = () => {return new GenerateAssetPlugin({filename: 'config/app-config.json',fn: (compilation, cb) => {cb(null, createServerConfig(compilation));}})
}

在config文件夹下,创建app.conifg.js

module.exports = {env: 'prod',baseUrl: "http://xxx.com"
}

这里就是常用的配置文件,在开发环境下,可以直接引入使用变量。
在正式环境下,还需要在webpack.base.conf.js文件夹下配置下。先引入:

const packageConfig = require('../package.json')
const generateAssetAppConfig = require('./generate-asset.config')

再加入plugins的配置

module.exports = {context: path.resolve(__dirname, '../'),entry: {app: './src/main.js'},output: {path: config.build.assetsRoot,filename: '[name].js',publicPath: process.env.NODE_ENV === 'production'? config.build.assetsPublicPath: config.dev.assetsPublicPath},plugins: [generateAssetAppConfig(packageConfig)],

在axios请求封装文件,抽离封装了一个https.js的配置文件
开发环境直接根据路径获取变量,正式环境从请求app-config.json获得

import * as g from '../config/app.config'
import $ from 'jquery'if (process.env.NODE_ENV === 'production') {//打包正式环境使用app-config.json$.ajax({url: 'config/app-config.json',async: false,type: 'get',dataType: "json",success: function (rs) {if (rs.baseUrl) {axios.defaults.baseURL = rs.baseUrl;}}});
} else {//开发环境就直接使用app.config.jsaxios.defaults.baseURL = g.baseUrl;   //配置接口地址
}

以上
使用npm run dev,就直接用本机的config/app.config.js文件
使用npm run build 就用在服务器上的dist/config/app-config.json文件

方法(二) 暴露在window成为全局变量

在config目录下创建app.config.js

let baseURL = "http://xxx.com";window.httpConfig = {baseURL,
};

打包正式环境时,把app.config.js拷贝到static目录下
build/webpack.prod.conf.js修改如下:

	new CopyWebpackPlugin([{from: "./config/app.config.js",to: 'static',},]),

然后在index.html中引入

 <script src="/static/app.config.js"></script>

在axios的配置文件中,配置接口地址

import * as g from '../config/app.config'// 如果是正式环境打包,去配置文件获取,如果是开发环境,去获取本机的app.config文件
axios.defaults.baseURL =process.env.NODE_ENV === "production"? window.httpConfig.baseURL: g.baseURL;

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

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

相关文章

2019年第八届数学建模国际赛小美赛A题放射性产生的热量解题全过程文档及程序

2019年第八届数学建模国际赛小美赛 A题 放射性产生的热量 原题再现&#xff1a; 假设我们把一块半衰期很长的放射性物质做成一个特定的形状。在这种材料中&#xff0c;原子核在衰变时会以随机的方向释放质子。我们假设携带质子的能量是一个常数。质子在穿过致密物质时&#x…

重生奇迹MU翅膀合成方法

重生奇迹MU翅膀&#xff0c;攻击力和吸收伤害都相当强大&#xff0c;但是合成难度极高&#xff0c;下面给大家详解怎么合成&#xff01; 方法/步骤 1、先到商店买加4追4物品&#xff0c;级别越高越好&#xff0c;可以买多个&#xff0c;数量越多&#xff0c;合成几率越高&…

html 基础学习笔记

Date:20231212 html标签 基础学习笔记 一、web和internet 1.1、Internet简介 Internet 是一个全球性的计算机互联网络&#xff0c;中文名称有"因特网"、“国际互联网”、“网际网”、"交互网络"等Internet提供的主要服务 Telnet、Email、www、BBS、FTP等…

通过css3的锚定滚动属性,实现分页加载时让滚动条不闪动

html标签 <div scroll"handleScroll" id"list-container"style"overflow-anchor:auto;overflow-y: auto;height: 80vh"><ul id"talks"v-for"(item,index) in msgList":key"item.roleiditem.timeitem.conten…

vue实现进入全屏和退出全屏

最近一个项目需要进行大屏展示&#xff0c;所以登录完就要处于一个全屏的状态&#xff0c;当切换到控制台之后就可以退出全屏。在登录之后调用enterFullscreen方法&#xff0c;就可以进入全屏。在点击切换到控制台时&#xff0c;可以调用exitFullscreen方法。 enterFullscreen…

04-Gateway网关中跨域问题的解决方案

跨域问题 详情参考Ajax请求的跨域问题处理方案 CORS方案 CORS是W3C标准全称是跨域资源共享(Cross-origin resource sharing),它允许浏览器向跨源服务器发出XMLHttpRequest请求从而克服了AJAX只能同源使用的限制 第一步: 在gateway模块的application.yml文件中添加允许跨域请…

【PWN】学习笔记(一)【二进制基础】

目录 课程教学一次简单的Hack程序的编译与链接Linux下的可执行文件格式ELF进程虚拟地址空间程序的编译与链接程序的装载与进程的执行x86&amd64汇编简述 课程教学 课程链接&#xff1a;https://www.bilibili.com/video/BV1854y1y7Ro/?vd_source7b06bd7a9dd90c45c5c9c44d12…

互动直播 之 播放器 类

目录 一、播放器类 1、两个静态变量 1)、静态变量定义 2)、静态变量赋值

ssh无密码自动登录实现原理

Linux命令ssh-keygen -t rsa用于生成公钥、私钥&#xff0c;其中RSA是一种非对称加密算法&#xff0c;可以用于加密和数字签名等操作。 生成公钥和私钥的原理&#xff1a; 利用RSA算法生成一对密钥&#xff0c;其中一个是私钥&#xff0c;另一个是公钥。 私钥只由持有者保存…

基于ssm的疫情物质管理系统论文

摘 要 进入信息时代以来&#xff0c;很多数据都需要配套软件协助处理&#xff0c;这样可以解决传统方式带来的管理困扰。比如耗时长&#xff0c;成本高&#xff0c;维护数据困难&#xff0c;数据易丢失等缺点。本次使用数据库工具MySQL和编程技术SSM开发的疫情物资管理系统&am…

离线运行Oracle Database In-Memory Advisor

概念 离线运行Oracle Database In-Memory Advisor&#xff0c;就是不在生产系统上运行。这样可以避免影响生产系统。但需要从生产系统导出以下的数据&#xff1a; AWR DumpAWR补充数据 过程 导出AWR Dump 连接到CDB root运行。 SQL> connect / as sysdba SQL> ?/r…

全能数据分析软件Tableau Desktop 2019 mac功能亮点

Tableau Desktop 2019 mac是一款专业的全能数据分析工具&#xff0c;可以让用户将海量数据导入并记性汇总&#xff0c;并且支持多种数据类型&#xff0c;比如像是编程常用的键值对、哈希MAP、JSON类型数据等&#xff0c;因此用户可以将很多常用数据库文件直接导入Tableau Deskt…

光栅化渲染:优化技巧

我们在前面的章节中介绍的所有技术都是光栅化算法的基础。 不过&#xff0c;我们只是以非常基本的方式实现了这些技术。 GPU 渲染管道和其他基于光栅化的生产渲染器使用相同的概念&#xff0c;但它们使用这些算法的高度优化版本。 展示用于加速算法的所有不同技巧远远超出了介绍…

富时中国a50指数期货:探寻涨跌脉络

富时中国A50指数期货是衡量中国大陆50家最具代表性上市公司的指数。作为衍生品交易市场的重要一环&#xff0c;A50指数期货是投资者关注的焦点之一。其涨跌走势直接反映了中国大陆股市的整体表现和投资者情绪。 A50指数期货简介 富时中国A50指数期货由新加坡交易所&#xff0…

免费且好用的 MySQL 客户端

DBeaver 支持 Mac、Windows、Linux&#xff0c;提供 Eclipse 插件。社区版免费&#xff0c;支持主流的关系型数据库 官网地址&#xff1a;DBeaver Community | Free Universal Database Tool MySQL WorkBench MySQL WorkBench 是官方出品的客户端&#xff0c;支持 Mac、Windo…

AntDB数据库参加ACDU中国行杭州站,分享数据库运维实践与经验

关于ACDU与中国行&#xff1a; ACDU是由墨天轮社区举办的中国数据库联盟的品牌活动之一&#xff0c;在线下汇集数据库领域的行业知名人士&#xff0c;共同探讨数据库前沿技术及其应用&#xff0c;促进行业发展和创新的平台&#xff0c;也为开发者们提供友好交流的机会。 AntD…

SpringCloud微服务(简略笔记二)

Docker 概念 docker和虚拟机的差异 * docker是一个系统进程&#xff1b;虚拟机是在操作系统中的操作系统 * docker体积小&#xff0c;启动速度&#xff0c;性能好&#xff0c;虚拟机体积大&#xff0c;启动速度慢&#xff0c;性能一般 镜像和容器 镜像&#xff08;image&…

使用 Python 实现简单的爬虫框架

爬虫是一种自动获取网页内容的程序&#xff0c;它可以帮助我们从网络上快速收集大量信息。在本文中&#xff0c;我们将学习如何使用 Python 编写一个简单的爬虫框架。 一、请求网页 首先&#xff0c;我们需要请求网页内容。我们可以使用 Python 的 requests 库来发送 HTTP 请…

【STM32F103】ADC 模拟数字转换器

ADC ADC&#xff08;Analog-to-Digital Converter&#xff09;&#xff0c;模拟-数字转换器&#xff0c;也叫模数转换器&#xff0c;可以将连续变化的模拟信号转换为离散的数字信号。 我们可以外接上将采集信号转为模拟信号的模块&#xff0c;如光敏电阻传感器&#xff0c;热…

仓库拣货应用案例

多个订单的光挑选 PTL用于WIP&#xff08;正在工作&#xff09;机架 首先&#xff0c;我们的过程。 制造工厂很大&#xff0c;有大量的制造工具&#xff0c;非常密集&#xff0c;而且大量的高设备可能会阻碍无线电 晶片储存在一个密封的载体中&#xff0c;它们从一台机器运输…