详解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 cookie解码函数(兼容ff)
Mar 17 Javascript
js下用层来实现select的title提示属性
Feb 23 Javascript
JS 跳转页面延迟2种方法
Mar 29 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
微信小程序倒计时功能实现代码
Nov 09 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
zend api扩展的php对象的autoload工具
2011/04/18 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
轮播的简单实现方法
2016/07/28 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
js实现简单扫雷
2020/11/27 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
Python实现线程池代码分享
2015/06/21 Python
深入讲解Python编程中的字符串
2015/10/14 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
基于python实现学生信息管理系统
2019/11/22 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
String和StringBuffer的区别
2015/08/13 面试题
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
工程造价专业大学生自荐信
2013/10/01 职场文书
环境工程大学生个人的自我评价
2013/10/08 职场文书
校园网站的创业计划书范文
2013/12/30 职场文书
大学生职业生涯规划书模版
2013/12/30 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
学期个人工作总结
2015/02/13 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python