Vue records packaging time

foreword

The project is deployed online, but the newly added effects do not take effect. Why is that nasty bug still there? Is my deployment overwritten by a colleague’s version, or is it because the cache has not been updated? How to quickly verify that it is running now? Is your website the latest version?

In fact, it is very simple, you can add a label index.htmlin the web page , and display the current packaging time as its content. Principle: Elements can provide meta-information about the page. Meta-data will not be displayed on the client, but will be parsed by the browser. Elements are often used to specify a description of a web page, keywords, when a file was last modified, author, and other metadata. Method: Use the plug-in in webpack to implement custom meta tags.<head><meta>
<meta><meta>
html-webpack-plugin

Show results

insert image description here

the code

1. webpack project

In the configuration file of webpack

module.exports = merge(baseWebpackConfig, {
    
    
    plugins: [
        new HtmlWebpackPlugin({
    
    
            filename: 'index.html',
            template: 'index.html',
            inject: true,
            meta: {
    
    
                builtTime: new Date().toLocaleString();
            }
        })
    ]
})

2. Project created by vuecli scaffolding

Use vuecli version 4.5 and version 5.0 to create vue2 and vue3 version projects, please refer to the following configuration

Configure in vue.config.js

module.exports = defineConfig({
    
    
    chainWebpack: config => {
    
    
        config.plugin("html").tap(args => {
    
    
        	// 可以只配置只在生产环境中显示
            // if (process.env.NODE_ENV === "production") {
    
    
                const date = new Date();
                args[0].builtTime = date.toLocaleString();
            // }
            return args;
        });
    },
});

Configure in index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover">
    <% if (htmlWebpackPlugin.options.builtTime) { %>
        <meta name="builtTime" content="<%= htmlWebpackPlugin.options.builtTime %>">
    <% } %>
	<link rel="icon" href="<%= BASE_URL %>favicon.ico">
</head>

3. Projects created by vite

vitePlugins need to be installed to use vite-plugin-html-config, which is equivalent to the HtmlWebpackPlugin in webpack

npm i vite-plugin-html -D

yarn add vite-plugin-html -D

Configure in vite.config.js

import htmlPlugin from "vite-plugin-html-config";
export default defineConfig(({
     
      command, mode }) => {
    
    
  plugins: [
    vue(),
    htmlPlugin({
    
    
      metas:
        mode === "production"
          ? [
              {
    
    
                name: "builtTime",
                content: new Date().toLocaleString(),
              },
            ]
          : [],
    }),
  ];
});

Summarize

This blog introduces how to insert <meta>tags in the vue project, and it can be applied to display packaging time and verify project version.

Welcome to like + comment + favorite!