詳解vue項目打包步驟
終端運(yùn)行命令 npm run build
打包成功的標(biāo)志與項目的改變,如下圖:
點(diǎn)擊index.html,通過瀏覽器運(yùn)行,出現(xiàn)以下報錯,如圖:
那么應(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 即可。
此時點(diǎn)擊index.html,通過瀏覽器運(yùn)行便,會發(fā)現(xiàn)動態(tài)綁定的static的圖片找不到,故static必須使用絕對路徑。將圖片路徑修改為絕對路徑,至此,打包完成。
以上所述是小編給大家介紹的vue項目打包步驟詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
淺談Vue開發(fā)人員的7個最好的VSCode擴(kuò)展
這篇文章主要介紹了淺談Vue開發(fā)人員的7個最好的VSCode擴(kuò)展,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01Vue實(shí)現(xiàn)數(shù)據(jù)表格合并列rowspan效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)數(shù)據(jù)表格合并列rowspan效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-07-07Vue過濾器,生命周期函數(shù)和vue-resource簡單介紹
這篇文章主要介紹了Vue過濾器,生命周期函數(shù)和vue-resource簡單介紹,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2021-01-01