vue cli3保留index.html中的注释,并在html中写入时间戳,记录打包时间

效果如下:
vue cli3保留index.html中的注释,并在html中写入时间戳,记录打包时间_第1张图片
实现过程如下:

  1. 修改vue.config.js中关于webpack的配置,保留index.html中的注释。原理可以看vue cli3官网关于webpack——修改插件选项部分的描述
    chainWebpack: config => {
       config.plugin('html')
           .tap(args => {
               if(process.env.NODE_ENV === 'production') {
                   args[0].minify.removeComments = false;
               }
               return args;
           });
   }
  1. 在.env文件中写入环境变量VUE_APP_TIME,记住:一定要以VUE_APP开头。如果没有.env文件就新建一个该文件。
VUE_APP_TIME
  1. 在vue.config.js中为VUE_APP_TIME写入当前打包时间
    注意事项:需要安装moment的依赖包来格式化你想要的时间格式 npm install moment
const moment = require('moment');
process.env.VUE_APP_TIME = moment().format('YYYY.MM.DD hh:mm:ss');

4.在index.html中使用该环境变量,大功告成。

<!DOCTYPE html>
<!--<%= VUE_APP_TIME %>-->
<html lang="zh">

贴一份vue.config.js的完整代码

const moment = require('moment');
process.env.VUE_APP_TIME = moment().format('YYYY.MM.DD hh:mm:ss');

module.exports = {
    publicPath: './', // 默认值为'./'
    assetsDir: 'static',
    productionSourceMap: false,
    devServer: {
        port: 9000,
        proxy: {
            '/web': {
                target: 'http://192.168.9.120/',
                changeOrigin: true
            }
        }
    },
    chainWebpack: config => {
        config.plugin('html')
            .tap(args => {
                if(process.env.NODE_ENV === 'production') {
                    args[0].minify.removeComments = false;
                }
                return args;
            });
    }
};

有用请点赞,谢谢!

你可能感兴趣的:(vue)