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

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

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

官方文檔：webpack output

如圖：

可以看到publicPath屬性中有個(gè)三元運(yùn)算，process.env.NODE_ENV又是個(gè)什么呢？

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

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

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

哈哈，文件加載過(guò)來(lái)了，但是，css文件中引的font文件路徑加載不到，來(lái)看看這個(gè)時(shí)候font文件的路徑

由于我用了相對(duì)當(dāng)前文件夾的路徑，此時(shí)的url就是相對(duì)當(dāng)前css文件所在目錄的，此時(shí)dist文件夾結(jié)構(gòu)如圖：

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

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

鐺啷啷，加載出來(lái)了。

總結(jié)

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

最新評(píng)論