详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计


Posted in Javascript onAugust 31, 2018

执行 npm run build 之后的 dist 目录的静态资源的文件名多会追加上 hash 值,比如: page1.f151b4d3.js

那如果不要 hash 呢,你只需要配置 vue.config.js 文件中的 filenameHashing

官方文档也提到了因为 html 也是我们通过插件生成的,静态资源直接就 inject 进去的,所以,当 html 不是自动生成或者其他情况时候,就不能加 hash 了,可以配置 false。

filenameHashing: false

我们看看源码实现:

首先它是 vue.config.js 的一个配置,在文件 cli-service/lib/options.js 中:

默认值是 true

filenameHashing: true

先看 css 部分,在文件 cli-service/lib/config/css.js 中:

const filename = getAssetPath(
   options,
   `css/[name]${options.filenameHashing ? '.[contenthash:8]' : ''}.css`
  )

再看 js 部分,在文件 cli-service/lib/config/prod.js

const filename = getAssetPath(
    options,
    `js/[name]${isLegacyBundle ? `-legacy` : ``}${options.filenameHashing ? '.[contenthash:8]' : ''}.js`
   )

他们多依赖函数 getAssetPath,在文件 util/getAssetPath.js 中定义了

const path = require('path')

module.exports = function getAssetPath (options, filePath, placeAtRootIfRelative) {
 return options.assetsDir
  ? path.posix.join(options.assetsDir, filePath)
  : filePath
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript window对象属性整理
Oct 24 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
javascript中函数作为参数调用的方法
Feb 09 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
5个实用的JavaScript新特性
Jun 16 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 #Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 #Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 #Javascript
javascript闭包的使用之按钮切换功能
Aug 30 #Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 #Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 #Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 #Javascript
You might like
php中用memcached实现页面防刷新功能
2014/08/19 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
JavaScript闭包实例详解
2016/06/03 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
利用Python爬虫给孩子起个好名字
2017/02/14 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
学期自我鉴定范文
2013/10/01 职场文书
个人评价范文分享
2014/01/11 职场文书
亲子拓展活动方案
2014/02/20 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android
教你一步步实现一个简易promise
2021/11/02 Javascript
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python
浅谈Redis缓冲区机制
2022/06/05 Redis