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