Vue項目用webpack打包後，預覽時資源路徑出錯（文末有vue項目連接分享）

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

 

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

 

1、項目打包過程：

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: './'，能夠起到一樣的效果。

 

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

若是你的項目文件中的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/#/

 

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