基於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 。