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

使用Vue CLI創(chuàng)建項目

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

npm install -g @vue/cli

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

vue create my-project

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

修改webpack配置文件

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

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

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

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

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

重新打包構建

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

npm run build

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

總結

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