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,則可以看到歡迎頁了。看到這個就說明一切順利
QQ截圖20160831151130.png

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等插件到最新的版本;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM