vue打包后修改配置文件,vue打包加版本号

　　本文主要介绍vue如何修改打包配置实现打包代码的自定义命名，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。

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

　　打包文件

修改配置后打包为

首先修改router文件

　　例如，这是原始方法参考页面：

　　//基本配置

　　从导入基本处置。/pages/basic dispose/basic dispose

　　现修改为：

　　const basic dispose=()=import(/* webpackChunkName: basic dispose */。/pages/basic dispose/basic dispose’)

　　注：

　　/* WebPackchunkname:" BasicDispose " */中的Basic Dispose是打包的文件名，可以随意命名。一般把同一个文件中的页面看作一个模块，打包成一个js文件，这个js文件以这些页面的文件夹名命名，比较好理解。

打开项目中的build文件夹

修改js打包的命名方法

　　webpack.prod.conf.js文件将

　　文件名：utils.assetsPath(js/[name])。【chunkhash】。js’)，

　　chunk filename:utils . assets path( js/[id])。【chunkhash】。js’)

　　修改为：

　　文件名：utils.assetsPath(js/[name])。js？v=[chunkhash])，

　　chunk filename:utils . assets path( js/[name])。js？v=[chunkhash])

　　如下所示：

　　输出：{

　　路径：config.build.assetsRoot，

　　//原始代码设置

　　//filename:utils . assets path( js/[name])。【chunkhash】。js’)，

　　//chunk filename:utils . assets path( js/[id])。【chunkhash】。js’)

　　文件名：utils.assetsPath(js/[name])。js？v=[chunkhash])，

　　chunk filename:utils . assets path( js/[name])。js？v=[chunkhash])

　　}

修改css打包的命名方法

　　webpack.prod.conf.js文件将

　　文件名：utils.assetsPath(css/[name])。[内容哈希]。css )，

　　修改为：

　　文件名：utils.assetsPath(css/[name])。css？v=[contenthash])，

　　如果要修改图片的包装名称，请参考

　　在模块-规则中修改图片如下图所示，修改对应的路径即可。

命名修改如下

　　名称：utils.assetsPath(img/[name])。[ext]？v=[hash:7])

图片还有一种情况是

　　对于小图片，它们被直接压缩成base64编码的图片。在这里，您可以手动修改limit的设置，这是一个限制大小的参数。如果限制值设置得较大，所有图片都将被压缩。虽然不会涉及到路径问题，但是浏览器的压力会很大，页面的对应时间也会受到影响。

vue 修改打包文件名

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

　　输出：{

　　公共路径：“”。/,

　　路径：config.build.assetsRoot，

　　文件名：utils.assetsPath(js/[name])。js’)，

　　chunk filename:utils . assets path( js/[id])。js’)

　　新的ExtractTextPlugin({

　　文件名：utils.assetsPath(css/[name])。css )，

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。