vue項目打包踩坑記


基於webpack+vue-cli下的vue項目打包命令是 npm run build ,等待打包完成后在根目錄生成dist文件夾,里面包含了所有項目相關的內容。

注意:需要完整版的vue-cli項目,即通過vue init webpack初始化的項目才可以,通過vue init webpack-simple初始化的項目沒有打包文件,無法打包。目錄結構如下


vue init webpack初始化的目錄結構,打包依賴build和config文件夾的配置,static存放靜態文件

vue init webpack-simple初始化的目錄結構缺少build、config、static文件夾,一般用於新手上路

 

在打包過程中遇到了幾個問題,希望能給同樣是打包新手的同學一些幫助。

1、打包完成后可以本地測試結果,直接在文件夾中雙擊打開或者編輯工具右鍵瀏覽器打開即可。 

 

2、打開網站后一片空白,因為是本地,路徑不對,需要在打包前配置

config/index.js 中,有dev和build兩個參數,將build參數下的assetsPublicPath的值又 '/' 修改為 './' 。重新打包,然后刷新頁面即可。

 

 3、打開項目后如果網站的css中背景圖片或者圖標沒有加載出來, 需要配置引用路徑

build/utils.js中,ctrl+f搜索 ExtractTextPlugin.extract 。

 4、如果進行了第三3個操作,並且通過相對路徑引用了和src目錄同級的static靜態目錄的文件,這時候打包也會找不到static目錄的文件,需要把引用的相對路徑修改為絕對路徑。

比如: 

修改前是 ../../static/ueditor  ,修改后 @/../static/ueditor 。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM