最近用vue寫了一些項目，項目寫完之後需要打包之後才能放到網上展示，所以在這裏記錄一下項目打包的過程以及遇到的一些問題。

-------------------------------------------------- 分割線 --------------------------------------------------

一、項目打包過程：

1.vue項目寫完後，首先在項目路徑下的命令行中運行：npm run build，看到Build complete即表示項目打包完成；

然後，回到自己的項目文件夾中，會看到新生成了一個dist文件夾，這個dist文件夾就是用來存放webpack給我們打包後的文件的

打開dist文件夾，會看到裏面有一個static文件夾和一個index.html文件，static文件夾裏存放的是webpack為我們打包後的css文件、js文件以及項目圖片等，而index.html則是我們用vue搭建的項目的主頁，然而，在瀏覽器中打開index.html會發現顯示空白！！

二.資源的路徑問題

上面說到打包後得到的index.html在網頁中打開顯示空白，我們可以按F12打開控制臺看看究竟發生了什麽情況。

打開控制臺後，我們可以發現一些報錯信息，顯示無法找到文件，這些文件都是webpack給我們打包好的資源文件，無法找到這些文件的原因是路徑設置問題

直到了問題後，我們就可以解決問題了。

首先，我們回到項目文件，找到config>index.js文件，打開這個文件，找到build（註意是build不是dev）這個對象下面的assetsPublicPath的值改成 ‘./‘

保存之後，重新在命令行中npm run build，然後再打開dist文件夾下面的index.html，即可顯示成功！！

此外，還有另外一個方法可以解決這個問題，就是在項目文件夾下找到build>webpack.prod.conf.js，打開該文件夾，找到output對象，然後添加一行代碼 publicPath: ‘./‘，可以起到同樣的效果。

三、項目中背景圖片的路徑問題

如果你的項目文件中的css代碼以類似這樣的方式引入背景圖片：background-image: url(../assets/main-view/icons/seafood.png)，這時項目打包後，打開index.html文件可能會無法顯示該背景圖片，這其實也是圖片路徑的問題，這時你需要在項目文件中找到build>utils.js文件，然後打開該文件，在generateLoaders( )這個函數下面添加一行代碼 publicPath: ‘../../‘ ，即可解決背景圖片無法顯示的問題。

--------------------------------------------------------分割線-----------------------------------------------------

以上就是vue打包項目過程及遇到的一些問題的總結，下面附上最近寫的幾個vue項目，有興趣的朋友可以看一下。

a-vue-todolist：

這個todolist的demo比較簡單，只有一個頁面，不過基本涵蓋了vue入門必須掌握的一些知識點，包括v-if/v-show/v-model/v-on/v-bind等vue常用指令，以及props/自定義事件等父子通信相關知識。

項目地址： https://github.com/Yuan-Yiming/a-vue-todolist

瀏覽地址：https://yuan-yiming.github.io/a-vue-todolist/dist/

a-vue-blog：

這個博客項目也比較簡單，由博客列表、閱讀博客、添加博客、預覽博客等幾個頁面組成。

項目地址： https://github.com/Yuan-Yiming/a-vue-blog

瀏覽地址：https://yuan-yiming.github.io/a-vue-blog/dist/#/

fresh-everyday（沒完成，還在更新中）：

這是一個用vue搭建的電商前端項目，相對比較復雜一些，基本實現一個電商網站的主要頁面的功能，不過目前還沒寫完，還在更新中，有興趣的朋友也可以也可以看一下。

項目地址：https://github.com/Yuan-Yiming/fresh-everyday

瀏覽地址：https://yuan-yiming.github.io/fresh-everyday/dist/#/

最後說一句，喜歡我項目的朋友歡迎給我的項目打星星哦~~

Vue項目打包預覽以及資源路徑出錯問題（文末有項目鏈接分享）