vue2 自定义webpack plugin 添加版本文件到public目录下/vue-config全局环境变量

在项目根目录创建version-plugin.js文件

// 引进node fs 模块
const fs = require('fs')// 引进node path 模块
const path = require('path')// webpack plugin
class VersionPlugin {// 实例化传的参数constructor (options = {}) {this.options = optionsthis.isFinish = false}// plugin 勾子apply (compiler) {// plugin 执行完成compiler.hooks.done.tap('VersionPlugin', () => {// 判断已经加载过结束if (this.isFinish) return false// 写入文件到public目录下fs.writeFileSync(path.join(__dirname, 'public', 'version.json'), JSON.stringify(this.options))this.isFinish = true})}
}module.exports = VersionPlugin

vue-config.js文件

const webpack = require('webpack')
const VersionPlugin = require('./version-plugin')
const now = Date.now()
module.exports = {
configureWebpack: {plugins: [// 实例自定义plugin 并传入时间缀new VersionPlugin({ version: now }),// 定义全局环境变量new webpack.DefinePlugin({'process.env.VUE_APP_VERSION': now})]}
}

在router跳转前可以做其它操作

import axios from 'axios'
// 在生产环境上
if (process.env.NODE_ENV === 'development') return false
// 通过axios 获取版本信息
const res = await axios.get(location.origin + '/version.json' + '?timeStamp=' + Date.now())// 判断信息不同,操作其它逻辑
if (res.data.version !== process.env.VUE_APP_VERSION) {}

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

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

相关文章

实战教程:使用Spring Boot和Vue.js开发社区团购管理系统

✍✍计算机编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java实战 |…

使用AnimeGAN2将照片动漫化--入门

使用AnimeGAN2将照片动漫化--入门 1. 环境准备2. 使用3. 总结 1. 环境准备 首先下载AnimeGAN2:https://github.com/TachibanaYoshino/AnimeGANv2.git 然后使用conda 创建一个python3.6的环境conda create -n pyt36 python3.6: 创建一个requirements.txt文件&am…

前端模块化-AMD、CMD、CommonJS和UMD、ESM

前端模块化-AMD、CMD、CommonJS和UMD、ESM 背景CommonJSAMD和require.jsCMD和sea.jsUMD(Universal Module Definition - 通用模块定义)ES6 ModuleES6 模块与 CommonJS 模块的差异总结 背景 在NodeJS之前,由于没有过于复杂的开发场景&#xf…

生信学院|02月02日《云端设计一体化平台—3DEXPERIENCE》

课程主题:云端设计一体化平台—3DEXPERIENCE 课程时间:2024年02月02日 14:00-14:30 主讲人:郭俊辰 生信科技 解决方案顾问 1、云产品发展趋势 2、3DExperience产品的介绍 3、3DExperience DEMO演示 请安装腾讯会议客户端或APP&#xff…

记一次无法ping通Cisco switch处理

网络小白,仅仅在工作中需要telnet到switch。奈何之前不知什么原因一直无法ping通该switch,很久只能使用串口连接来配置了。而今遇到了使用脚本telnet switch的场景,不得不再次面对这个问题。 首先还是使用串口来看switch是否拿到ip&#xff…

【蓝桥杯冲冲冲】进阶搜索 Anya and Cubes

蓝桥杯备赛 | 洛谷做题打卡day22 文章目录 蓝桥杯备赛 | 洛谷做题打卡day22Anya and Cubes题面翻译输入格式输出题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 样例 #3样例输入 #3样例输出 #3 提示题解代码我的一些话 Anya and Cubes …

LeetCode 54 螺旋矩阵

题目描述 螺旋矩阵 给你一个 m 行 n 列的矩阵 matrix ,请按照 顺时针螺旋顺序 ,返回矩阵中的所有元素。 示例 1: 输入:matrix [[1,2,3],[4,5,6],[7,8,9]] 输出:[1,2,3,6,9,8,7,4,5]示例 2: 输入&#x…

python数据生成excel文件实现

在Python中,你可以使用第三方库 openpyxl 来生成 Excel 文件。以下是一个简单的示例,演示如何使用 openpyxl 创建一个包含数据的 Excel 文件: 安装 openpyxl: 使用以下命令安装 openpyxl: pip install openpyxl 创建…

线程池的知识

线程池是由服务器预先创建的一组子线程,线程池中的线程数量应该和 CPU 数量差不多。线程池中的所 有子线程都运行着相同的代码。当有新的任务到来时,主线程将通过某种方式选择线程池中的某一个子 线程来为之服务。相比与动态的创建子线程,选…

【昕宝爸爸小模块】深入浅出详解之常见的语法糖

深入浅出详解之常见的语法糖 一、🟢关于语法糖的典型解析二、🟢如何解语法糖?2.1🟢糖块一、switch 支持 String 与枚举2.2📙糖块二、泛型2.3📝糖块三、自动装箱与拆箱2.4🍁糖块四、方法变长参数…

实战Vue.js与MySQL:爱心商城项目开发指南

✍✍计算机编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java实战 |…

【深入浅出SpringCloud原理及实战】「Netflix系列之Hystrix」针对于限流熔断组件Hystrix的回退降级实现方案和机制

针对于限流熔断组件Hystrix的回退降级实现方案和机制 依赖隔离依赖隔离之线程&线程池高延迟请求的例子 线程池的优势线程池的弊端线程池的开销线程池开销 信号量 依赖隔离 Hystrix通过使用『舱壁模式』(注:将船的底部划分成一个个的舱室,…

SpringBoot+BCrypt算法加密

BCrypt是一种密码哈希函数,BCrypt算法使用“盐”来加密密码,这是一种随机生成的字符串,可以在密码加密过程中使用,以确保每次加密结果都不同。盐的使用增强了安全性,因为攻击者需要花费更多的时间来破解密码。 下图为使用BCrypt算法后的的密码结果值: 下面讲一下注册登陆…

Python编程-使用urllib进行网络爬虫常用内容梳理

Python编程-使用urllib进行网络爬虫常用内容梳理 使用urllib库进行基础网络请求 使用request发起网络请求 from urllib import request from http.client import HTTPResponseresponse: HTTPResponse request.urlopen(url"http://pkc/vul/sqli/sqli_str.php") pr…

从 0 开始搭建 React 框架

webpack 配置 不再赘述&#xff0c;可参考前三个文章&#xff08;wenpack5 基本使用 1 - 3&#xff09; 使用 react 安装 react、react-dom、babel/preset-react yarn add react react-dom babel/preset-react<!DOCTYPE html> <html lang"en"> <h…

SQL表操作DDL,DML和辅助的操作语句

在开发工作中经常使用到对DB进行操作&#xff0c;各种数据库类型的操作语句类似的&#xff0c;下面是以mysql为主进行举例&#xff0c;复制表结构&#xff0c;然后插入数据&#xff0c;再增加新字段&#xff0c;再给新字段复制&#xff0c;再做其它操作&#xff08;省略&#x…

AST混淆与解混淆笔记:数值常量加密

本文主要是作者记笔记为主&#xff0c;温故而知新&#xff0c;记录混淆和解混淆的代码 以以下代码为例&#xff1a; function test(a, b){const c "123";a a 1 // aa a 2a a * 1234a a.toString()a a.substring(0, 3)b a "00"return b; } test(…

android--RXJava+Retrofit封装使用

在欲望的城市里&#xff0c;你就是我最后的信仰。 目录 前言 一&#xff0c;方法封装 二&#xff0c;okhttpretrofitrxjava 实现网络请求 前言 关于RXJava的基本使用&#xff0c;请参考 文章android--RXJava详细使用篇-CSDN博客 下面我们讲一下RXJava在android中的相对比较…

[设计模式Java实现附plantuml源码~结构型]不兼容结构的协调——适配器模式

前言&#xff1a; 为什么之前写过Golang 版的设计模式&#xff0c;还在重新写Java 版&#xff1f; 答&#xff1a;因为对于我而言&#xff0c;当然也希望对正在学习的大伙有帮助。Java作为一门纯面向对象的语言&#xff0c;更适合用于学习设计模式。 为什么类图要附上uml 因为很…

AIGC专题:生成式AI(GenAI)赋能供应链之路

今天分享的是AIGC系列深度研究报告&#xff1a;《AIGC专题&#xff1a;生成式AI&#xff08;GenAI&#xff09;赋能供应链之路》。 &#xff08;报告出品方&#xff1a;Gartner&#xff09; 报告共计&#xff1a;46页 什么是生成式人工智能 ChatGPT&#xff1a;一种OpenAI服…