建立Vue專案部署

2021-10-12 20:57:19 字數 1342 閱讀 9384

感謝vue + spring boot 專案實戰(一):專案簡介這位博主的詳細介紹,本文內容主要參考其部落格!

安裝 cnpm 的命令為 :

npm install -g cnpm --registry=

若你的系統為ubuntu,則安裝npm可以參考在ubuntu 18.04上,如何安裝node.js & npm

ubuntu更新npm時需要sudo npm -g install npmubuntu安裝 cnpm 的命令為 :

sudo npm install -g cnpm --registry=

完成後就可以使用 cnpm 替代 npm 了,我不太喜歡用 cnpm,喜歡用的小夥伴注意一點,cnpm 不要與 npm 混合使用,乙個專案用 cnpm 就從頭用到底,不要中途敲錯命令,否則就會出現混亂。不過萬一遇到這種情況也不用慌,把專案的 node_modules 資料夾刪了重新執行 npm/cnpm install 就行了,只是比較浪費時間。

npm install -g vue-cli

注意此種方式安裝的是 2.x 版本的 vue cli,最新版本需要通過 npm install -g @vue/cli 安裝。新版本可以使用圖形化介面初始化專案,並加入了專案健康監控的內容,推薦大家使用。不過新版本建立出專案的結構跟舊版本略有不同,閱讀這個教程時可能會有一些困惑的地方。

然後執行命令vue init webpack myproject,這裡 webpack 是以 webpack 為模板指生成專案,myproject為我的專案名,你可以換成自己的專案名稱。建議使用下面的配置:

這裡會問是否安裝 vue-router,一定要選是,也就是回車或按 y,vue-router 是我們構建單頁面應用的關鍵。

專案資料夾目錄如下:

接下來進入專案資料夾,執行cnpm run dev

訪問http://localhost:8080/後顯示:

到此,vue專案初始化完成。

執行cnpm run build在dist資料夾下生成static資料夾和index.html,隨後將static資料夾和index.html放入/usr/share/nginx/html中即可,可在/etc/nginx/nginx.conf檔案中更改nginx的配置項。

vue專案部署

1 更改專案下config資料夾index.js檔案 標紅處兩個位置 build 2 打包檔案,npm run build 之後會生成乙個dist資料夾,即為打包好的檔案,將檔案放在磁碟中,配置nginx監聽80埠,並指定服務名稱server name,最終可用kangqiao.kangqiao.c...

vue專案部署

放到純英文目錄下 啟動nginx 雙擊nginx.exe或者cmd視窗切換到nginx檔案下 輸入命令 nginx.exe 或者 start nginx 如果失敗報錯0.0.0.0 80 failed 檢視博文 複製出乙份nginx.conf 重新命名為 x.conf 修改 此處dist直接放在ng...

vue專案部署Nginx

cd usr local 切換路徑 1.2 解壓安裝 tar zxvf nginx 1.6.2.tar.giz c usr local local這個目錄類似於windows的program目錄,所以一些軟體可以都安裝在這裡 1.yum install pcre 2.yum install pcre...