Vue.js：使用vue-cli快速構建項目
阿新 • • 發佈：2017-05-21
lin nbsp 本地 con ges cad alt check ron
然後執行
npm run dev
在瀏覽器打開http://localhost:8080，則可以看到歡迎頁了。
但是這個只能在本地跑，要如何在我們自己的服務器上訪問呢？此時需要執行
npm run build
會生成靜態文件，在根目錄的dist裏，裏面有個index.html，這是服務器訪問的路徑指定到這裏就可以訪問我們自己的項目了。但是我發現個問題就是生成index.html裏引用的css和js的引用路徑不對，這時候就需要自己修改一下配置了。
進入config/index.js
原來的配置的引用路徑為
我自己更改為
這樣就能正常訪問了。
vue-cli是什麽？
vue-cli 是vue.js的腳手架，用於自動生成vue.js模板工程的。
vue-cli怎麽使用？
安裝vue-cli之前，需要先安裝了vue和webpack，不知道怎麽安裝的可以看我之前的文章《Vue + Webpack 實現SPA應用文檔》
安裝vue-cli
npm install -g vue-cli //全局安裝vue-cli
vue init webpack projectName //生成項目名為projectName的模板，這裏的項目名projectName隨你自己寫
cd projectName
npm install //初始化安裝依賴
這樣子項目就安裝完了。生成的項目下面的目錄是這樣的
然後執行
npm run dev
在瀏覽器打開http://localhost:8080，則可以看到歡迎頁了。
但是這個只能在本地跑，要如何在我們自己的服務器上訪問呢？此時需要執行
npm run build
會生成靜態文件，在根目錄的dist裏，裏面有個index.html，這是服務器訪問的路徑指定到這裏就可以訪問我們自己的項目了。但是我發現個問題就是生成index.html裏引用的css和js的引用路徑不對，這時候就需要自己修改一下配置了。
進入config/index.js
原來的配置的引用路徑為
我自己更改為
這樣就能正常訪問了。
Vue.js：使用vue-cli快速構建項目