[Vue CLI 3] 配置之filenameHashing使用和源码设计

news/2024/6/18 21:42:47

执行 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
}

http://www.niftyadmin.cn/n/3484860.html

相关文章

最流行的java开发软件_当下最流行的开发工具

It’s been a busy season for trigger-happy gamers. Halo 5, Call of Duty: Black Ops III, and Star Wars Battlefront all launched within a few weeks of one another. If you like pointing virtual guns at things, you’ve been in kill/death ratio heaven.That sort…

阿里云IoT工业互联网应用开发平台上线 一站式构建工业互联网应用

今天,制造业发展主要面临生产成本不断上升,供应链协同低效,产销数据脱节三个痛点,智能制造成为关键。因此如何借助工业互联网平台,快速、高效部署相关应用,推动智能制造转型,已经成了工业制造业…

COMPASS+spring 构建自己的搜索引擎

在新架构中打算选择Compass或Hibernate Search作为搜索引擎框架,比较后,感觉Hibernate Search上还是没有Compass成熟,另外考虑到后期对网页的爬取及搜索需求,决定还是基于Compass来作为架构缺省的搜索引擎。网上关于 Compass的文档…

java ssm数据接口签名加密_SSM 登录 JS和Java互通加解密(AES)

最近新项目上线,被客户扫描出【已解密的登录请求】,原因是我们在登录请求时没有对用户名或密码进行加密请求(悲催,以前的项目没有进行加密也没出啥问题),本着客户至上的原则,我们在下次投产时把这个功能给加上。在网上…

java 锁机制有什么用_java的锁机制

1.什么是死锁线程死锁描述的是这样一种情况:多个线程同时被阻塞,它们中的一个或者全部都在等待某个资源被释放。由于线程被无限期地阻塞,因此程序不可能正常终止。public class DeadLockDemo {private static Object resource1 new Object()…

XFire WebService开发快速起步

环境:XFire-1.2.6JDK1.5MyEclipse 6.5Tomcat-5.5.27Windows XP Professional简体中文版软件下载地址:[url]http://repository.codehaus.org/org/codehaus/xfire/xfire-distribution/1.2.6/xfire-distribution-1.2.6.zip[/url][url]http://apache.mirror.…

python如何求一个列表里所有数字的和_在Python中汇总一个数字列表

我有一个数字列表,如[1,2,3,4,5...] ,我想计算(12)/2和第二, (23)/2和第三, (34)/2 ,依此类推。 我怎样才能做到这一点?我想将第一个数字与第二个数字相加并除以2,然后将第二个数字与第三个相加…

vue知识掌握(一)

vue项目的搭建 本文章主要讲述vue项目的搭建,在搭建vue项目前需要准备一些材料。 1.node安装 npm:在你安装node的时候一般node已经自带了npm,所以忽略。 webpack:npm install webpack -g 检验安装是否成功的办法: 检验…