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