Vue-cli3.0怎么修改打包后的js文件名

最新推荐文章于 2025-04-24 16:40:42 发布

原创最新推荐文章于 2025-04-24 16:40:42 发布 · 5.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端基础专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种通过在webpack配置中加入时间戳来解决浏览器缓存导致的代码更新不生效问题的方法。具体操作是在vue.config.js文件中修改输出的js文件名，使其包含当前时间的时间戳，确保每次构建后文件名不同，从而强制浏览器加载新的资源。

场景:每次发布完代码之后，浏览器缓存严重，会导致之前解决的部分问题不体现。

方法：使用webpack配置

文件：vue.config.js

const TimeStamp = new Date().getTime();
// const MiniCssExtractPlugin = require('mini-css-extract-plugin');

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

// vue.config.js
module.exports = {
  configureWebpack: {
    output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.js】
      filename: `js/[name].${TimeStamp}.js`,
      chunkFilename: `js/[name].${TimeStamp}.js`
    },

解决方法:在每次打包后的js文件名中加入时间戳。