詳解Vue CLI3配置之filenameHashing使用和源碼設(shè)計(jì)使用和源碼設(shè)計(jì)
執(zhí)行 npm run build 之后的 dist 目錄的靜態(tài)資源的文件名多會(huì)追加上 hash 值，比如: page1.f151b4d3.js
那如果不要 hash 呢，你只需要配置 vue.config.js 文件中的 filenameHashing
官方文檔也提到了因?yàn)?html 也是我們通過(guò)插件生成的，靜態(tài)資源直接就 inject 進(jìn)去的，所以，當(dāng) html 不是自動(dòng)生成或者其他情況時(shí)候，就不能加 hash 了，可以配置 false。
filenameHashing: false
我們看看源碼實(shí)現(xiàn)：
首先它是 vue.config.js 的一個(gè)配置，在文件 cli-service/lib/options.js 中：
默認(rèn)值是 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`
)
他們多依賴函數(shù) 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
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
AntV+Vue實(shí)現(xiàn)導(dǎo)出圖片功能
AntV?組織圖操作完畢以后，需要點(diǎn)擊按鈕將畫(huà)布以圖片的形式導(dǎo)出，這篇文章主要介紹了AntV結(jié)合Vue實(shí)現(xiàn)導(dǎo)出圖片功能,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了深入理解vue中的$set,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
vue2如何實(shí)現(xiàn)vue3的teleport
這篇文章主要介紹了vue2如何實(shí)現(xiàn)vue3的teleport，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue拖拽排序組件Vue-Slicksort，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue-cli構(gòu)建vue項(xiàng)目的步驟詳解
這篇文章主要介紹了vue-cli構(gòu)建vue項(xiàng)目的步驟詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
vue實(shí)現(xiàn)裁切圖片同時(shí)實(shí)現(xiàn)放大、縮小、旋轉(zhuǎn)功能
這篇文章主要介紹了vue實(shí)現(xiàn)裁切圖片同時(shí)實(shí)現(xiàn)放大、縮小、旋轉(zhuǎn)功能，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了如何在Vue2中實(shí)現(xiàn)組件props雙向綁定,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Vue Router動(dòng)態(tài)路由使用方法總結(jié)
這篇文章主要介紹了Vue Router動(dòng)態(tài)路由使用方法總結(jié),需要的朋友可以參考下2023-10-10
Vue中使用require.context自動(dòng)引入組件的操作方法
require.context?是?webpack?提供的一個(gè)API,用于創(chuàng)建context,即一組具有相同上下文的模塊,使用?require.context?可以方便地加載多個(gè)模塊,并且可以靈活地控制模塊的加載順序和依賴關(guān)系,本文給大家講解Vue中使用require.context自動(dòng)引入組件的方法,感興趣的朋友一起看看吧2024-01-01
vue項(xiàng)目使用md5加密、crypto-js加密、國(guó)密sm3及國(guó)密sm4的方法
密碼或者其他比較重要東西假如使用明文傳輸中是很危險(xiǎn)的,所以就需要前端一些加密協(xié)議,對(duì)密碼、手機(jī)號(hào)、身份證號(hào)等信息進(jìn)行保護(hù),下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用md5加密、crypto-js加密、國(guó)密sm3及國(guó)密sm4的相關(guān)資料,需要的朋友可以參考下2022-12-12