Vue 项目增加版本号输出, 可用于验证是否更新成功

webpack

  1. vue.config.js 中增加以下配置, 此处以增加一个日期时间字符串为例, 具体内容可以根据自己需求自定义
javascript 复制代码
// vue.config.js
module.exports = {
    chainWebpack(config) {
        config.plugin('define').tap(args => {
          args[0]['process.env'].APP_VERSION = `${JSON.stringify(new Date().toLocaleString())}`
          return args
        })
    }
}
  1. 在main.js 中输出
javascript 复制代码
// main.js
console.log('build time:', process.env.APP_VERSION)
  1. 效果

vite

  1. 在vite.config.js 中增加配置, 此处已输出一个版本号+年月日时分秒的字符串为例
javascript 复制代码
// vite.config.js
import config from "./package.json"
import dayjs from "dayjs"

const verNum = `${config.version} ${dayjs().format("YYMMDDHHmm")}`

export default ({ mode }) => {
    return defineConfig({
        define: {
            "process.env.APP_VERSION": JSON.stringify(verNum),
        },
    })
}
  1. 在需要使用的界面用 process.env.APP_VERSION 取值
javascript 复制代码
// login.vue

<template>
    <div @click="fn">&nbsp; V{{ appVersion }}</div>
</template>

<script>
    data() {
        return {
            appVersion: process.env.APP_VERSION,
        }
    },
</script>
  1. 效果
相关推荐
daols884 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐7 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台7 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue