如何确定前端代码已部署？

2024-04-19 21:34| 来源: 网络整理| 查看: 265

多人协作的项目，每次发布上线，你可能不清楚你提交的代码，是否赶上了车。看完此文，一切尽在掌握。

首先，单开一个js文件，专门放发版相关的信息，例如我要知道每次build项目的时间：

//info.js const moment = require('moment'); process.env.APP_TIME = moment().format('YYYY-MM-DD(dddd) HH:mm:ss'); // 你也可以加入项目现在发的分支版本...等信息

然后，以vue项目为例，在vue.config.js中，引入文件。vue-cli内置了html-webpack-plugin，index.html 文件是一个会被 html-webpack-plugin 处理的模板，客户端的环境变量可以直接使用。

require('./info.js'); //... module.exports = { //... chainWebpack: (config) => { config.plugin('html').tap((options) => { var args = [...options]; args[0].filename = 'index.html'; args[0].template = path.join(__dirname, './你的入口index.html所在目录/index.html'), args[0].minify = { ...options[0].minify, removeComments: false, }; return args; }) }, }

为template指定的模板文件没有指定任何loader的话，默认使用ejs-loader。如 template: './index.html'，若没有为.html指定任何loader就使用ejs-loader。

在index.html的head里添加代码：

这样，编译的时候，ejs-loader就会替换这里的变量，输出打包编译的时间:

最后，通过对比你代码push的时间，就能知道代码是否已经部署。

【本文地址】

如何确定前端代码已部署？

如何确定前端代码已部署？

今日新闻

推荐新闻