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

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

首先，单开一个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里添加代码：

<!-- <%= process.env.APP_TIME %> -->

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

<!DOCTYPE html>
<html>
  <head>
    <!-- 2021-11-25 08:30:01 -->
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  </head>
  <body>
  </body>
</html>

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