vue.js - Vue-CLI 版本号 - 它是否存在以及如何在 Vue 应用程序本身中使用它？

Question

我有一个 Vue 应用程序正在使用 Vue CLI 构建用于生产部署。

我想在应用程序中包含一个典型的递增版本号，以便我和测试人员可以确定我们正在测试正确的确切版本。我想以至少两种方式在应用程序中使用它 a) 将它显示给测试人员，b) 将它包含在错误跟踪 API 调用中，例如到 Sentry.io。

目前我必须查看 app.XXXX.js 上的哈希值并进行比较。虽然这确实唯一标识了构建，但它不是顺序的，对于 CSS/JS/供应商等是不同的，并且很难在代码库中使用。

我很高兴编写一个构建包装器脚本，该脚本管理数字并将其注入(inject)到构建中(如果需要的话)。

我目前使用的命令是例如

npx vue-cli-service build --mode staging

Answer 1

我已经使用日期和时间实现了一些东西。它在 Vue 2 项目中。
将此代码(或类似代码)添加到 vue.config.js 的顶部文件:

const verMajor = 1;
const verMinor = 0;
const now = new Date();
const padTwo = (val) => (val > 9 ? "" : "0") + val;
const nowMonth = now.getMonth() + 1;
const nowDay = now.getDate();
const verBuildDate = now.getFullYear() + padTwo(nowMonth) + padTwo(nowDay);
const verBuildTime = padTwo(now.getHours()) + padTwo(now.getMinutes()) + padTwo(now.getSeconds());
process.env.VUE_APP_VERSION = `${verMajor}.${verMinor}.${verBuildDate}.${verBuildTime}`;

console.log(`Building version: ${process.env.VUE_APP_VERSION}`);

//  ...rest of the config

在组件代码中，您可以这样做:

get versionText(): string {
    return process.env.VUE_APP_VERSION;
}

但我正在使用基于类的组件，所以如果你不是，我想这会起作用:

computed: {
    versionText: funnction () {
        return process.env.VUE_APP_VERSION;
    }
}

在模板中:

Ver: {{versionText}}

这会导致类似的结果:
版本:1.0.20211013.110634
如果这看起来太长，我相信它可以根据您的需要缩短 - 或者您可以在文件中存储一个数字并在配置文件中编写一些 JS 以在每次构建时增加它 - 或者如果您检查每个发布构建 process.env.NODE_ENV === "release" .
如需更多信息，请参阅: https://cli.vuejs.org/guide/mode-and-env.html
:o)