Vue CLI是Vue.js的官方腳手架。它可以簡化Vue項目的搭建過程，使得開發者可以更加專注于業務邏輯的實現。Vue CLI默認使用webpack打包工具，會在打包后的文件名中加入一些哈希值以避免文件緩存。但是在某些情況下，我們可能想要去掉這些哈希值，本文將會詳細介紹如何做到這一點。

使用Vue CLI創建項目

首先，我們需要使用Vue CLI創建一個項目。如果還沒安裝Vue CLI的話，可以使用以下命令進行安裝：

npm install -g @vue/cli

安裝完成后，使用以下命令創建一個新項目：

vue create my-project

其中，my-project是你要創建的項目名稱。執行上述命令后，會出現一個交互式命令行界面，讓你選擇使用哪些插件、工具等等。根據自己的需求進行選擇即可。

修改webpack配置文件

在使用Vue CLI創建項目時，Vue CLI會自動生成一個默認的webpack配置文件。我們需要對這個文件進行修改，以去掉文件名中的哈希值。

首先，在項目根目錄下創建一個vue.config.js文件。這個文件是Vue CLI自動讀取的配置文件，可以用來覆蓋默認配置。

然后，在vue.config.js文件中添加以下代碼：

module.exports = {
chainWebpack: config =>{
// 生產環境
config.when(process.env.NODE_ENV === 'production', config =>{
// 去掉文件名中的hash
config.output.filename('js/[name].js').end();
config.output.chunkFilename('js/[name].js').end();
});
// 開發環境
config.when(process.env.NODE_ENV === 'development', config =>{
// 去掉文件名中的hash
config.output.filename('js/[name].js').end();
config.output.chunkFilename('js/[name].js').end();
});
}
};

可以看到，在chainWebpack函數中，我們對webpack的輸出文件名進行了修改。在生產環境和開發環境中都需要進行修改，所以使用了config.when()函數進行判斷。

重新打包構建

完成上述修改后，需要重新運行npm run build命令來進行打包構建。

npm run build

執行上述命令后，webpack會根據我們修改后的配置文件進行打包，打包完成后的文件名將不再包含哈希值。

總結

本文介紹了如何使用Vue CLI去掉文件名中的哈希值。首先，我們通過Vue CLI創建了一個項目；接著，在項目根目錄下創建了vue.config.js文件，并對文件名進行了修改；最后，通過npm run build命令重新進行打包構建。如果你有類似的需求，可以參考上述方法進行實踐。