詳解vue項(xiàng)目打包步驟
更新時(shí)間：2019年03月29日 14:12:30 作者：YJC5431
這篇文章主要介紹了vue項(xiàng)目打包步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
終端運(yùn)行命令 npm run build
打包成功的標(biāo)志與項(xiàng)目的改變，如下圖：
點(diǎn)擊index.html，通過(guò)瀏覽器運(yùn)行，出現(xiàn)以下報(bào)錯(cuò)，如圖：
那么應(yīng)該如何修改呢？
具體步驟如下：
- 1、查看package.js文件的scripts命令
- 2、打開webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl點(diǎn)擊，跳轉(zhuǎn)到index.js文件
- 3、其中dev是開發(fā)環(huán)境，build是構(gòu)建版本，找到build下面的assetsPublicPath: '/',然后修改為assetsPublicPath: './',即“/”前加點(diǎn)。
- 4、終端運(yùn)行 npm run build 即可。
此時(shí)點(diǎn)擊index.html，通過(guò)瀏覽器運(yùn)行便，會(huì)發(fā)現(xiàn)動(dòng)態(tài)綁定的static的圖片找不到，故static必須使用絕對(duì)路徑。將圖片路徑修改為絕對(duì)路徑，至此，打包完成。
以上所述是小編給大家介紹的vue項(xiàng)目打包步驟詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了el-tooltip根據(jù)條件控制顯示的示例代碼,包括列表型和樹狀圖型,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
這篇文章主要介紹了vue中的按鈕綁定事件小案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
下面小編就為大家分享一篇vue axios 表單提交上傳圖片的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
在開發(fā)過(guò)程中,有時(shí)候會(huì)遇到這么一種情況,通過(guò)動(dòng)態(tài)的賦值,但是dom沒(méi)有及時(shí)更新,能夠獲取到動(dòng)態(tài)賦的值,但是無(wú)法獲取到雙向綁定的dom節(jié)點(diǎn),這就需要我們手動(dòng)進(jìn)行強(qiáng)制刷新組件,下面這篇文章主要給大家介紹了關(guān)于vue組件強(qiáng)制刷新的4種方案,需要的朋友可以參考下2023-05-05
vue項(xiàng)目中l(wèi)ess的一些使用小技巧
前段時(shí)間一直在學(xué)習(xí)vue,開始記錄一下遇到的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中l(wèi)ess的一些使用小技巧,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
解決Vue使用swiper動(dòng)態(tài)加載數(shù)據(jù),動(dòng)態(tài)輪播數(shù)據(jù)顯示白屏的問(wèn)題
今天小編就為大家分享一篇解決Vue使用swiper動(dòng)態(tài)加載數(shù)據(jù),動(dòng)態(tài)輪播數(shù)據(jù)顯示白屏的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了Vue導(dǎo)航守衛(wèi)使用教程，可以向任意給定的導(dǎo)航守衛(wèi)傳遞next，但是next的使用過(guò)程容易出錯(cuò)，需要確保next在任何給定的導(dǎo)航守衛(wèi)中都被嚴(yán)格調(diào)用一次2023-04-04
vue3組合式API實(shí)現(xiàn)todo列表效果
這篇文章主要介紹了vue3組合式API實(shí)現(xiàn)todo列表,下面用組合式?API的寫法,實(shí)現(xiàn)一個(gè)可新增、刪除的todo列表效果,需要的朋友可以參考下2024-08-08
為vue項(xiàng)目自動(dòng)設(shè)置請(qǐng)求狀態(tài)的配置方法
這篇文章主要介紹了vue項(xiàng)目自動(dòng)設(shè)置請(qǐng)求狀態(tài)的配置方法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
本篇文章主要介紹了vue下跨域設(shè)置的相關(guān)介紹，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08