Jacky's Blog Jacky's Blog
  • 首页
  • 关于
  • 项目
  • 大事记
  • 留言板
  • 友情链接
  • 分类
    • 干货
    • 随笔
    • 项目
    • 公告
    • 纪念
    • 尝鲜
    • 算法
    • 深度学习
  • 1
  • 4

Vue CLI 生成构建号

Jacky
26 8 月, 2021
目录
  1. 安装 Installation
  2. 功能 Features
    1. version.json
    2. 开发环境 Development mode
    3. 生产环境 Production mode
      1. 生产环境检测版本文件 Check version.json in production mode
  3. LICENSE

几年前玩过 theos,在编译代码的时候会自动 ++Build ID,修改大版本号后 Build ID 会从 1 开始计算。 然后最近在搞前端开发,想给线上加一个「检测到新版本就提示用户刷新页面」的需求,于是就花了点时间做了个 Vue CLI 的插件。

去年插件做完之后传到了 npm 上,还是有一些下载量的。这两天有空修了一下 bug,把之前在 Electron App 下无法编译、不指定编译产物目录时无法编译的问题修复了,顺便加了个历史编译次数的记录、插件语言改为英语。

安装 Installation

    npm i vue-cli-plugin-generate-build-id

or

    yarn add -D vue-cli-plugin-generate-build-id

功能 Features

安装插件后的首次编译时会在项目的根目录建立 version.json

The first time you build the project for production, the plugin will create version.json in the root dir of the project.

version.json

{
    "version" : "1.0", // `version` in `packages.json`
    "build_id": 1,
    "total_build": 1,
}

开发环境 Development mode

你可以在项目中通过调用 process.env.VUE_APP_VERSION 获取到当前的版本号。

You can use process.env.VUE_APP_VERSION to get the current version of the package.json in your project.

生产环境 Production mode

可通过 process.env.VUE_APP_VERSION 获取到当前的版本号 可通过 process.env.VUE_APP_BUILD_ID 获取当前版本的 build_id 可通过 process.env.VUE_APP_TOTAL_BUILD 获取历史编译次数 total_build

Use process.env.VUE_APP_VERSION to get the current version of the package.json in your project. Use process.env.VUE_APP_BUILD_ID to get the current build_id Use process.env.VUE_APP_TOTAL_BUILD to get the current total build times (total_build)

项目编译完成后,插件会将根目录下的 version.json 复制到产物的根目录。

注意:修改 packages.json 内的 version 的值使 build_id 清零, 删除根目录的 version.json 则将 build_id 和 total_build 清零。

Caution:change the value of verison in package.json will reset the build_id in version.json, delete the version.json in project root will reset build_id and total_build.

生产环境检测版本文件 Check version.json in production mode

router.beforeEach((to, from, next) => {

    ...
    if (process.env.NODE_ENV === 'production') {
        axios.get('/version.json?' + Date.now()).then(r => {
            if (!(process.env.VUE_APP_VERSION === r.data.version
                && Number(process.env.VUE_APP_BUILD_ID) === r.data.build_id)) {

                // 发现新版本后的业务逻辑
                // verison.json changed
                // ...
            }
        })
    }
    ...
}

LICENSE

MIT

1
本文系作者 @Jacky 原创发布在 Jacky's Blog。未经许可,禁止转载。
Mac mini 入手
上一篇
Nginx 安装配置指南
下一篇

评论 (4)

再想想
  • chan

    你的这个需求可以考虑http的强缓存和协调缓存

    4 年前
    • Jacky

      @chan: 学到了 以后试试,其实现在提示更新都不是主要的需求了,主要是想留 build id

      4 年前
    • Jacky

      @chan: VueRouter 跳转的话也不会重新下载 html 吧(虽然可以在 beforeEach 里判断

      4 年前
    • chan

      @Jacky: 其实我也没用过,不太清楚具体流程,我看到vuepress好像是这种更新方式

      4 年前

近期评论

  • Jacky 发表在《Nginx UI》
  • kim 发表在《Nginx UI》
  • Jacky 发表在《留言板》
  • 菜鸟 发表在《留言板》
  • merlin 发表在《留言板》
4 1
Copyright © 2016-2025 Jacky's Blog. Designed by nicetheme.
粤ICP备16016168号-1
  • 首页
  • 关于
  • 项目
  • 大事记
  • 留言板
  • 友情链接
  • 分类
    • 干货
    • 随笔
    • 项目
    • 公告
    • 纪念
    • 尝鲜
    • 算法
    • 深度学习

搜索

  • Mac
  • Apple
  • OS X
  • iOS
  • macOS
  • Linux
  • 阿里云
  • WordPress
  • 运维
  • macOS Sierra

Jacky

Go Python C C++ | 弱冠之年 | 物联网工程
183
文章
193
评论
267
喜欢