返回 导航

其他

hangge.com

Vue.js - 显示项目build构建时间教程（附：使用时间戳命名编译后文件）

作者：hangge | 2023-08-24 09:10
    有时我们想要在页面上显示或者控制台中输出 Vue 项目的编译构建时间，以方便追踪应用的版本或测试。这个功能具体可以通过以下步骤实现。

1，安装 moment 库

    Moment.js 是一个轻量级的 JavaScript 时间库，它提供了许多日常对时间的操作方法，比如获取时间，设置时间，格式化时间，比较时间等。首先我们进入项目文件夹执行如下命令进行安装：
npm install moment

2，修改 webpack 配置文件

（1）修改项目的 webpack 配置文件 vue.config.js，在文件顶部引入 moment 库：
const moment = require('moment');

（2）在 webpack 配置中的 configureWebpack 选项下，添加 DefinePlugin 插件，我们定义一个全局变量 BUILD_TIME，并将构建时间作为其值。 
// webpack相关配置
configureWebpack: {
    // 提供一个回调函数，可以在这里修改webpack的配置
    // 相关文档：https://cli.vuejs.org/zh/guide/webpack.html#简单的配置方式
    // 这里只是一个示例，你可以根据你的需求进行配置。
    // 在这个示例中，我们给webpack添加了一个自定义的loader。
    module: {
        rules: [{
            test: /.txt$/,
            use: 'raw-loader',
        }, ],
    },
    plugins: [
        new webpack.DefinePlugin({
            'BUILD_TIME': JSON.stringify(moment().format('YYYY-MM-DD HH:mm:ss'))
        })
    ]
},

3，输出构建时间

（1）这样我们在 Vue 项目的任何地方，都可以访问全局变量 BUILD_TIME 来获取构建时间。比如下面我们在 main.js 中将构建时间输出： 
console.log('版本构建时间:', BUILD_TIME);

（2）项目部署后，使用浏览器访问页面，打开控制台可以看到如下信息：

附：使用自定义的时间戳作为编译后的文件名

（1）默认情况下，编译后的 js 文件名形式如下：

（2）如果想要使用自定义的时间戳作为文件名，我们可以在 vue.config.js 文件中进行如下配置：
configureWebpack: {
    // 提供一个回调函数，可以在这里修改webpack的配置
    // 相关文档：https://cli.vuejs.org/zh/guide/webpack.html#简单的配置方式
    // 这里只是一个示例，你可以根据你的需求进行配置。
    // 在这个示例中，我们给webpack添加了一个自定义的loader。
    module: {
        rules: [{
            test: /.txt$/,
            use: 'raw-loader',
        }, ],
    },
    output: {
        filename: `[name].${moment().format('YYYYMMDDHHmmss')}.js`,
        chunkFilename: `[name].${moment().format('YYYYMMDDHHmmss')}.js`,
    }
},

（3）这样编译后的文件名里面就使用时间戳了，这样也可以有效解决浏览器缓存问题：
评论

全部评论（0）

回到顶部