vue-cli快速構建Vue項目

vue-cli是什麼？

vue-cli 是vue.js的腳手架，用於自動生成vue.js模板工程的。

vue-cli怎麼使用？

安裝vue-cli以前，須要先裝好vue 和 webpack

npm install -g vue       //全局安裝vue
npm install -g webpack   //全局安裝webpack
npm install -g vue-cli   //全局安裝vue-cli

注意：上面這些裝過一次以後都不須要再安裝了
好比說個人項目要生成在D：/project下面
那麼先進到目錄裏

d:
cd project

使用vue-cli構建vue項目

vue init webpack projectName        //生成項目名爲projectName的模板
cd projectName                              
npm install                                      //初始化安裝依賴

這樣子項目就安裝完了,生成文件以下

。而後執行

npm run dev

在瀏覽器打開http://localhost:8080，則能夠看到歡迎頁了。看到這個就說明一切順利

vue-cli生成環境

可是這個只能在本地跑，要如何在咱們本身的服務器上訪問呢？此時須要執行

npm run build

會生成靜態文件，在根目錄的dist裏，裏面有個index.html，這是服務器訪問的路徑指定到這裏就能夠訪問咱們本身的項目了。
可是呢！！
把index.html和static上傳到服務器的時候，index.html和static須要一塊兒放到根目錄下，這樣就能夠經過http://www.omwteam.com/index.html了。
若是你想把整個dist文件夾傳上去，經過http://www.omwteam.com/dist/index.html,你會發現，引用的css和js路徑都是錯誤的，那麼怎麼解決呢？這時候就須要本身修改一下配置了。

進入config/index.js

原來的配置的引用路徑爲

我本身更改成

而後從新構建一下：

npm run build

這樣就能正常訪問了。

 

vue-cli開發環境 關於Cannot GET /的問題

　　針對開發環境須要注意，必定不要去改asssetsPublicPath裏面的內容，也就是這個地方是不要加點 改爲當前目錄的；不然會出Cannot GET 找不到頁面的問題；

 　　　　

 

 問題：

　　1. 構建後出現 main.js中 「 error  in ./src/App.vue」 和 「 error  in ./src/components/HelloWorld.vue」

　　

　　

　　答：更新node 和 npm update -g ,vue-cli等插件到最新的版本；