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文件夾，通常用於新手上路

 

在打包過程當中遇到了幾個問題，但願能給一樣是打包新手的同窗一些幫助。

一、打包完成後能夠本地測試結果，直接在文件夾中雙擊打開或者編輯工具右鍵瀏覽器打開便可。 

 

二、打開網站後一片空白，由於是本地，路徑不對，須要在打包前配置

config/index.js 中，有dev和build兩個參數，將build參數下的assetsPublicPath的值又 '/' 修改成 './' 。從新打包，而後刷新頁面便可。

 

 三、打開項目後若是網站的css中背景圖片或者圖標沒有加載出來， 須要配置引用路徑

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

 四、若是進行了第三3個操做，而且經過相對路徑引用了和src目錄同級的static靜態目錄的文件，這時候打包也會找不到static目錄的文件，須要把引用的相對路徑修改成絕對路徑。

好比： 

修改前是 ../../static/ueditor  ，修改後 @/../static/ueditor 。