vueCli3.x 版本中如何修改打包好的 css、js、img 文件名

2022 年 7 月 18 日
本文字数：1043 字
阅读完需：约 3 分钟

背景：

公司要求输出一个完全静态不变的 index.html 页面给别人，因而 index.html 中所有 js,css 文件名必须保证不变，只能更改文件名的版本号。原本想着是个简单需求没想到花了我整整半天时间，度娘并没有给我满意的答案，还傻乎乎地跑到尤大大的微博下问（可惜并没理我）。

如何修改：

话不多说上代码。我用的是 vueCli3.x，所有的修改全在 vue.config.js 中：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');const conf = require('./conf/projectConfig');module.exports = {  // 修改打包后js文件名  configureWebpack: { // webpack 配置    output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.js】      filename: `js/[name].${conf.version}.js`,      // chunkFilename: `js/[name].${conf.version}.js`    },    // 修改打包后css文件名    plugins: [      new MiniCssExtractPlugin({        filename: `css/[name].${conf.version}.css`,        // chunkFilename: `css/[name].${conf.version}.css`      })    ]  },  // 修改打包后img文件名  chainWebpack: config => {    config.module      .rule('images')      .use('url-loader')      .tap(options => {        return {          limit: 4096,          fallback: {            loader: 'file-loader',            options: {              name: `img/[name].${conf.version}.[ext]`            }          }        };      })  }}

复制代码

看到没 css,js,img 文件名的修改用三种完全不同的方式，每种方式都耗去我几个小时的时间。

问题：

有个问题就是生成的 js、css 确实有了带版本号的文件，但同时也多出来了带哈希文件名的文件

目的是达到了，但多出来的文件看着难受，经过网友提醒找到了解决办法：

解决方案：

js 的问题只要把下面的 chunkFilename 注释放开就可以了，css 可以用 vue-cli 官方提供的 css.extract API 解决。

output: { // js添加时间戳filename: `js/[name].${TimeStamp}.js`,chunkFilename: `js/[name].${TimeStamp}.js`,}extract: {//css添加时间戳filename: `css/[name].${TimeStamp}.css`,chunkFilename: `css/[name].${TimeStamp}.css`,},

复制代码

至此彻底解决。

写在最后：

还有个问题，要想生成完全静态不变的 index.html，得残忍的抛弃路由里面的分包加载思想，因为分包意味着你每多写出一个模块，就多一个 js 和 css 文件。

------------------------------结束分割线---------------------------------------

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/3a238b7de39204693357af9e5】。文章转载请联系作者。

木叶🐱

关注

还未添加个人签名 2019.02.18 加入

还未添加个人简介

发布

暂无评论

创作场景

vueCli3.x 版本中如何修改打包好的 css、js、img 文件名

背景：

如何修改：

问题：

解决方案：

写在最后：

木叶🐱

评论