Vue CLI3是Vue.js官方提供的一个基于Node.js的完整桌面开发环境，它的配置文件位于项目的根目录下，文件名为vue.config.js。本文主要介绍如何使用Vue CLI3中的filenameHashing配置项以及它的工作原理和源码设计。
当我们执行npm run build命令之后，Vue CLI3会将项目构建到dist目录下，构建过程中会将静态资源文件名加上hash值，如page1.f151b4d3.js。这种机制是为了实现长期缓存，当文件内容发生变化时，由于文件名中加入了基于内容的hash值，所以浏览器会重新加载新内容的文件。hash的加入增加了文件名的唯一性，有效避免了文件被缓存后无法更新的问题。
然而，在某些情况下，我们可能不希望给静态资源文件名加上hash值，比如手动修改了html文件后，会发现静态资源加载失败，因为生成的hash值和配置的hash值不一致，导致路径无法正确匹配。这时，我们可以在vue.config.js文件中通过设置filenameHashing为false来禁用文件名的hash值。
filenameHashing配置项位于vue.config.js文件中，其默认值为true，意味着开启hash值添加。如果我们将其设置为false，则会关闭此功能。具体的配置代码如下：
```javascript
module.exports = {
filenameHashing: false
};
```
在vue.config.js中设置filenameHashing为false之后，构建输出的静态资源将不再添加hash值。
源码实现部分位于cli-service的lib目录下，cli-service是Vue CLI3中的一个核心工具，它负责处理构建和开发相关的任务。文件路径的配置主要是在文件cli-service/lib/config/css.js和cli-service/lib/config/prod.js中，我们可以看到filenameHashing的默认值为true，这样在构建时默认会给css和js文件名加上hash值。
在css部分的配置代码如下：
```javascript
const filename = getAssetPath(
options,
`css/[name]${options.filenameHashing ? '.[contenthash:8]' : ''}.css`
);
```
在js部分的配置代码如下：
```javascript
const filename = getAssetPath(
options,
`js/[name]${isLegacyBundle ? '-legacy' : ''}${options.filenameHashing ? '.[contenthash:8]' : ''}.js`
);
```
其中，getAssetPath函数定义在util/getAssetPath.js中，负责根据配置的assetsDir和相对路径来获取最终的文件路径。该函数源码如下：
```javascript
const path = require('path');
module.exports = function getAssetPath(options, filePath, placeAtRootIfRelative) {
return options.assetsDir
? path.posix.join(options.assetsDir, filePath)
: filePath || placeAtRootIfRelative;
};
```
在上述代码中，path.posix.join方法用于连接路径，确保在不同操作系统上路径分隔符的正确性。
总结来说，通过阅读源码我们可以知道，filenameHashing配置项影响了文件路径的生成策略。当filenameHashing为true时，构建过程中会在文件名后加上基于内容的hash值；当filenameHashing为false时，文件名后则不会加上hash值。通过合理地配置filenameHashing，可以有效管理和缓存静态资源，提升应用的加载效率。
需要注意的是，源码中还提到了isLegacyBundle变量，它用于判断是否是兼容旧版浏览器的打包模式。如果是旧版模式，则在文件名中添加-legacy标识。
以上便是关于Vue CLI3配置中filenameHashing的使用和源码设计的详细解析，希望通过本文的介绍，大家能更深入地理解和掌握Vue CLI3在构建静态资源文件名时的策略和机制。
