vue-cli快速構建專案簡單介紹

admin發表於2017-04-16
Vue

下面簡單介紹一下如何使用vue-cli快速構建專案。

需要的朋友可以做一下參考。

vue-cli如何使用:

安裝vue-cli:

（1）.npm install -g vue-cli //全域性安裝vue-cli

（2）.vue init webpack projectName//生成專案名為projectName的模板，這裡的專案名projectName隨你自己寫

（3）.cd projectName                              

（4）.npm install  //初始化安裝依賴

生成的專案下面的目錄:

a:3:{s:3:\"pic\";s:43:\"portal/201704/16/120127u65axa22tzoaoo11.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

然後執行:

npm run dev

在瀏覽器開啟http://localhost:8080，則可以看到歡迎頁了。

但是這個只能在本地跑，要如何在我們自己的伺服器上訪問呢？此時需要執行。

npm run build

會生成靜態檔案，在根目錄的dist裡，裡面有個index.html，這是伺服器訪問的路徑指定到這裡就可以訪問我們自己的專案了。但是我發現個問題就是生成index.html裡引用的css和js的引用路徑不對，這時候就需要自己修改一下配置了。

進入config/index.js

原來的配置的引用路徑為:

a:3:{s:3:\"pic\";s:43:\"portal/201704/16/120255zxbsekth3htsrzeh.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以更改為:

a:3:{s:3:\"pic\";s:43:\"portal/201704/16/120321ifbggb5m5t5tlmff.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

相關文章