vue修改打包配置如何实现代码打包后的自定义命名

更新时间：2022年05月24日 14:59:04 作者：zuo-yiran

这篇文章主要介绍了vue修改打包配置如何实现代码打包后的自定义命名，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

修改打包配置实现代码打包后的自定义命名

打包后文件

在这里插入图片描述

修改配置后打包为

在这里插入图片描述

首先修改router文件

例如，这是原本方法引用页面：

//基础配置
import BasicDispose from './pages/BasicDispose/BasicDispose'

现修改为：

const BasicDispose = () => import(/* webpackChunkName: "BasicDispose" */ './pages/BasicDispose/BasicDispose')

注：

/* webpackChunkName: “BasicDispose” */内的BasicDispose是打包后的文件名，可以随意命名，一般是同一文件内的页面认为是一个模块，打包成一个js文件，而这个js文件以这些页面的文件夹名字命名，比较便于理解。

打开项目中的build文件夹

在这里插入图片描述

修改js打包的命名方法

webpack.prod.conf.js文件中把

filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

修改为：

filename: utils.assetsPath('js/[name].js?v=[chunkhash]'),
chunkFilename: utils.assetsPath('js/[name].js?v=[chunkhash]')

如下所示：

output: {
    path: config.build.assetsRoot,
    //原始代码设置
    // filename: utils.assetsPath('js/[name].[chunkhash].js'),
    // chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
    filename: utils.assetsPath('js/[name].js?v=[chunkhash]'),
    chunkFilename: utils.assetsPath('js/[name].js?v=[chunkhash]')
}

修改css打包的命名方法

webpack.prod.conf.js文件中把

filename: utils.assetsPath('css/[name].[contenthash].css'),

修改为：

filename: utils.assetsPath('css/[name].css?v=[contenthash]'),

如要修改图片的打包命名的方法则在

module–rules内关于图片的修改如下图所示修改对应的路径即可

在这里插入图片描述

命名修改如下

name: utils.assetsPath('img/[name].[ext]?v=[hash:7]')

图片还有一种情况是

对于小图片，是直接压缩成base64编码的图片，这里可以手动修改limit的设置，这是极限大小的参数，小于极限参数会自动进行压缩，如果将limit的值设的很大，使所有的图片都进行压缩的话，虽然不会涉及到路径的问题，但是会使浏览器压力很大,页面的相应时间会有影响。

vue 修改打包文件名

修改配置文件 webpack.prod.conf.js

output: {
  publicPath: './',
  path: config.build.assetsRoot,
  filename: utils.assetsPath('js/[name].js'),
  chunkFilename: utils.assetsPath('js/[id].js')
},
new ExtractTextPlugin({
  filename: utils.assetsPath('css/[name].css'),

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue组件初学_弹射小球(实例讲解)
下面小编就为大家带来一篇vue组件初学_弹射小球(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue table表格中如何控制下拉框的显示隐藏
这篇文章主要介绍了vue table表格中如何控制下拉框的显示隐藏问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Vue过滤器（filter）实现及应用场景详解
在Vue中使用过滤器（Filters）来渲染数据是一种很有趣的方式,下面这篇文章主要给大家介绍了关于Vue过滤器（filter）实现及应用场景的相关资料,需要的朋友可以参考下
2021-06-06
vue+axios实现图片上传识别人脸的示例代码
本文主要介绍了vue+axios实现图片上传识别人脸，这里采用的是vant的文件上传组件，通过上传图片后端识别图片里的人脸，感兴趣的可以了解一下
2021-11-11
vue制作toast组件npm包示例代码
这篇文章主要介绍了vue制作一个toast组件npm包,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-10-10
elementui源码学习之仿写一个el-divider组件
这篇文章主要为大家介绍了elementui源码学习之仿写一个el-divider组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
vue实现PC端分辨率适配操作
这篇文章主要介绍了vue实现PC端分辨率适配操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
简单谈谈vue的过渡动画(推荐)
下面小编就为大家带来一篇简单谈谈vue的过渡动画(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
vue3+ts实现一个表单组件的详细代码
这篇文章主要介绍了vue3+ts实现一个表单组件的详细代码,确保通过axios调用后端接口来获取省市区和街道数据,并在选择省市区时加载相应的街道数据,需要的朋友可以参考下
2024-07-07
Vue父组件监听子组件生命周期
这篇文章主要介绍了Vue父组件监听子组件生命周期,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-09-09