vue添加发布版本号方法
实现效果：启动应用在控制台打印版本信息，格式为：应用名称 + 版本号 + 日期，这里参考vue-devtool的版本如下：
# 第一步 在package.json中确定项目名称、版本
{
"name": "demo-version", // 应用名称
"version": "1.0.0", // 版本
"description": "A vue project", // 应用描述
"author": "", // 作者信息
...
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 第二步 在vue.config.js中配置环境变量
// 依赖moment
const moment = require('moment');
const {name, version} = require('./package.json');
const date = moment().format('YYYY-MM-DD');
module.exports = {
...,
chainWebpack(config) {
config.plugin('define').tap(args => {
// 注意变量需要搭配JSON.stringify使用
const envParams = {PLATFORM_NAME: JSON.stringify(name), VERSION: JSON.stringify(version), BUILD_DATE: JSON.stringify(date) }
args[0]['process.env'] = {...args[0]['process.env'], ...envParams};
console.log(args);
return args;
})
},
...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 第三步 在代码中添加输出
const date = process.env.BUILD_DATE;
const name = process.env.PLATFORM_NAME;
const version = process.env.VERSION;
window.console.log(
`%c ${name} %c v${version} (${date}) %c`,
'background:#001529 ; padding: 1px; border-radius: 3px 0 0 3px; color: #fff',
'background:#40a9ff ; padding: 1px; border-radius: 0 3px 3px 0; color: #fff',
'background:transparent'
)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
提示
这里使用window.console.log而不是console.log，是因为生产环境中一般都会屏蔽日志，使用window.console.log才能正常输出
上次更新: 2025/09/05, 8:09:00