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

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

javascript 复制代码
// 引进node fs 模块
const fs = require('fs')

// 引进node path 模块
const path = require('path')

// webpack plugin
class VersionPlugin {

	// 实例化传的参数
  constructor (options = {}) {
    this.options = options
    this.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文件

javascript 复制代码
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跳转前可以做其它操作

javascript 复制代码
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) {}
相关推荐
天蓝色的鱼鱼1 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙2 小时前
[译] Composition in CSS
前端·css
白水清风2 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix3 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278003 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端3 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧3 小时前
Promise 的使用
前端·javascript
NBtab3 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端
天天扭码3 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试