最近做的一個嵌入app的pc端項目，用的也是比較熟悉的vue-cli構建工具構建項目,需要的是打開dist文件夾入口html能加載到本地的靜態(tài)文件，打包后的index.html加載文件如圖：

url中的路徑據(jù)我們所知，最前面為一個反斜杠（/XX），表示從網(wǎng)站根目錄開始搜索文件，如果需要相對當前文件夾則需以 ./或者不加反斜杠為路徑開頭，看來是打包后的文件路徑有問題

于是就去找webpack.base.conf.js文件,有個output選項,output是webpack中對輸出文件的配置，最常用的有fileName、path屬性，指定輸出文件的名稱和在項目中的位置，publicPath可以為項目中的所有資源指定一個基礎路徑，也是我們解決這個問題的關鍵

官方文檔：webpack output

如圖：

可以看到publicPath屬性中有個三元運算，process.env.NODE_ENV又是個什么呢？

precess對象是一個全局變量，可以在應用程序中全局使用的（包括業(yè)務頁面），
process.env屬性返回一個包含用戶環(huán)境信息的對象，
process.env.NODE_ENV就是用來定義環(huán)境變量，一般包括production(生產(chǎn)環(huán)境)、development(開發(fā)環(huán)境)，我們在webpack中的各種配置也是根據(jù)環(huán)境變量來做相應處理。

既然是對生產(chǎn)環(huán)境的文件做處理自然是去找config.build對象，這個時候就來到config文件夾下找相關配置了

index.js文件中輸出兩個對象（dev、 build）, 在build對象中更改assetsPublicPath為'./'或者空字符串都行，這時候執(zhí)行下打包命令 npm run build，在瀏覽器中打開dist文件夾下的index.html

哈哈，文件加載過來了，但是，css文件中引的font文件路徑加載不到，來看看這個時候font文件的路徑

由于我用了相對當前文件夾的路徑，此時的url就是相對當前css文件所在目錄的，此時dist文件夾結構如圖：

我想到的解決辦法是對font文件的輸出做單獨處理，還是webpack.base.config.js文件，

更改font文件的輸出路徑，好了，npm run build

鐺啷啷，加載出來了。

總結

以上所述是小編給大家介紹的Vue-cli配置打包文件本地使用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論