当前位置：文江博客话题详情

vue-cli4或webpack打包的时候如何自动生成一个更新时间

发布于 2022-09-12 03:31:25 字数 405 浏览 16 评论 0

问题描述

vue-cli4或webpack打包的时候如何自动生成一个更新时间, 然后我在生产环境中按f12在html标签中可以看到这个时间如:
<html update="20200703">...</html>

不要在其他地方如js,css文件名中或css类名中显示这个时间, 只在html根节点显示

实现如上的效果应该在webpack或vue.config.js中如何设置呢?

问题出现的环境背景及自己尝试过哪些方法

你期待的结果是什么？实际看到的错误信息又是什么？

期待在根节点看到打包时间
<html update="20200703">...</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

尐偏执 2022-09-19 03:31:25

我这是vue-cli3，类似这样添加一个环境变量，然后使用webpack的模板语法


const path = require('path')

module.exports = {
    devServer: {
        port: 9013
    },
    outputDir: 'dist',
    filenameHashing: false,
    productionSourceMap: false,
    chainWebpack: GET_chainWebpack,
    publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/',
}

function resolve (dir) {
    return path.join(__dirname, dir)
}

function GET_chainWebpack (config) {
    config.plugin('html').tap(args => {        
        args[0].minify = {
            removeComments: false,
            collapseWhitespace: false,
            removeAttributeQuotes: false
        }
        args[0].hash = true
        args[0].inject = 'body'
        args[0].PACK_TIME = +new Date()
        return args
    })

    config.plugins.delete('preload')    
    config.plugins.delete('prefetch')

    config.resolve.alias.set('@js', resolve('src/js'))
                                            .set('@src', resolve('src'))
                                            .set('@css', resolve('src/css'))
                                            .set('@images', resolve('src/images'))
                                            .set('@components', resolve('src/components'))
                                            .set('@base', resolve('base'))
}

回复收藏 0