Vue CLI内部版本号-它存在吗?如何在Vue应用程序中使用它

Question

我有一个Vue应用程序正在使用Vue CLI进行生产部署。

我想在应用程序中包含一个典型的递增构建号，这样我和测试人员就可以确保我们正在测试正确的精确构建。我想在应用程序中至少以两种方式使用它：a(将其显示给测试人员，b(将其包含在错误跟踪API调用中，例如Sentry.io.

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

我很乐意编写一个构建包装器脚本，它可以管理数字并将其注入到构建中(如果需要的话(。

我目前使用的命令是例如

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(