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

 更新时间:2018年08月31日 08:52:55   作者:dailyvuejs  
这篇文章主要介绍了详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

相关文章

  • Vue.js 2.0中select级联下拉框实例

    Vue.js 2.0中select级联下拉框实例

    在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用,需要的朋友可以参考下
    2017-03-03
  • vue中监听返回键问题

    vue中监听返回键问题

    这篇文章主要介绍了解决vue中监听返回键问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • Vue3使用ref解决GetElementById为空的问题

    Vue3使用ref解决GetElementById为空的问题

    今天遇到一个问题,就是在Vue3组件中需要获取template中的元素节点,使用GetElementById返回的却是null,网上查找了好些资料,才发需要使用ref,所以本文给大家介绍了Vue3组件中如何使用ref解决GetElementById为空的问题,需要的朋友可以参考下
    2023-12-12
  • Vue 换肤的示例实践

    Vue 换肤的示例实践

    本篇文章主要介绍了Vue 换肤的示例实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue实现批量下载文件

    vue实现批量下载文件

    这篇文章主要为大家详细介绍了vue实现批量下载文件的方法(不走后端接口的方法),文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • element 表格多级表头子列固定的实现

    element 表格多级表头子列固定的实现

    本文主要介绍了element 表格多级表头子列固定的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • vue项目中使用ts(typescript)入门教程

    vue项目中使用ts(typescript)入门教程

    最近项目需要将原vue项目结合ts的使用进行改造,本文从安装到vue组件编写进行了说明,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • Vue分页插件的前后端配置与使用

    Vue分页插件的前后端配置与使用

    这篇文章主要为大家详细介绍了Vue分页插件的前后端配置与使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • vue实现el-menu与el-tabs联动的项目实践

    vue实现el-menu与el-tabs联动的项目实践

    本文讲述了如何使用Vue.js中的ElementUI组件库实现el-menu与el-tabs的联动,通过在el-menu中选择菜单项,可以切换el-tabs的内容区域,具有一定的参考价值,感兴趣的可以了解一下
    2023-11-11
  • vue如何判断安卓还是IOS

    vue如何判断安卓还是IOS

    这篇文章主要介绍了vue如何判断安卓还是IOS,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论