Jacky's Blog Jacky's Blog
  • 首页
  • 关于
  • 项目
  • 大事记
  • 留言板
  • 友情链接
  • 分类
    • 干货
    • 随笔
    • 项目
    • 公告
    • 纪念
    • 尝鲜
    • 算法
    • 深度学习
首页 › 干货 › Vue CLI 生成构建号

Vue CLI 生成构建号

Jacky
8月 26, 2021干货阅读 1,923
目录
  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的强缓存和协调缓存

    1年前 回复
    • Jacky

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

      1年前 回复
    • Jacky

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

      1年前 回复
    • chan

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

      1年前 回复
近期评论
  • Jacky发表在《Nginx UI》
  • daiwenzh5发表在《Nginx UI》
  • Jacky发表在《Nginx UI》
  • daiwenzh5发表在《Nginx UI》
  • Jacky发表在《Nginx UI》
4 1
  • 1
  • 4
Copyright © 2016-2023 Jacky's Blog. Designed by nicetheme.
粤ICP备16016168号-1
  • 首页
  • 关于
  • 项目
  • 大事记
  • 留言板
  • 友情链接
  • 分类
    • 干货
    • 随笔
    • 项目
    • 公告
    • 纪念
    • 尝鲜
    • 算法
    • 深度学习
# Mac # # Apple # # OS X # # iOS # # macOS #
Jacky
PHP C C++ Python | 舞象之年 | 物联网工程
174
文章
169
评论
267
喜欢