Vue 的環境的搭建和項目部署

Vue 的環境的搭建和項目部署

第一章    vue的環境搭建

1.1安裝nodejs

2.下載相應位數nodeJs

第二章 vue的打包部署

第三章nginx代理vue項目


第一章    vue的環境搭建

1.1安裝nodejs

1.先看系統配置,是32位和64位

uname –a

2.下載相應位數nodeJs

從nodejs官網(http://nodejs.cn/download/)下載安裝包 

3.在/opt/建立相關文件夾並將nodejs壓縮包上傳到vue文件夾並解壓

解壓上傳上來的nodejs壓縮包

tar –xvf node-v10.16.0-linux-x64.tar.xz

4.建立軟連接(相當於快捷鍵)

sudo ln –s /opt/vue/nodejs/bin/node  /usr/local/bin/node

sudo ln –s /opt/vue/nodejs/bin/npm /usr/local/bin/ npm

5.驗證node是否安裝成功

node -v和npm –v 

1.2 安裝cnpm

安裝cnpm是因爲使用npm install安裝包時速度很慢,所以建議安裝cnpm後使用cnpm install來安裝包

1.用命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.建立軟連接(否則用cnpm會報No command 'cnpm' found的錯誤

sudo ln –s –s /opt/vue/nodejs/bin/node /usr/local/bin/cnpm

1.3安裝vue-cli

1.用命令

cnpm install -g vue-cli

2.建立軟連接

sudo ln -s /opt/vue/nodejs/bin/ /usr/local/bin/vue

3.建一個測試項目測試是否安裝成功

vue init webpack firstproject

有問題選都按Y就可以

4.cd firstproject目錄下

5. 安裝項目依賴

cnpm install

6. 項目啓動

cnpm run dev

啓動成功linux界面

自動分配一個地址,輸入後成功訪問效果圖

至此,vuelinux環境就搭建完畢


第二章 vue的打包部署

2.1 方式一

1.線下打包成dist,用xshell傳到服務器,放在Nginx或者tomcat的webapp目錄下都可以

打包命令

 npm run build

192.16.1.41的Tomcat 在/opt/tomcat位置.

端口爲7001

2.查看tomcat端口

Ps –ef|grep tomcat 

強制殺死進程

Kill -9 XXX

3.  啓動tomcat

sh  tomcat/bin/startup.sh

4.  實時查看最新的500行日誌

tail -500f tomcat/log/ catalina.log

2.2 方式二

線下寫好代碼提交到svn服務器(要與部署的服務器一致),在服務器上打包部署

以192.168.1.41爲例

1.如果開發者第一次導入,可以用命令

svn co https://ip/svn/  下載到/opt/svn/xx/code/目錄

2.然後再npm install (如果線下已經安裝上傳了相關依賴就可以省略這一步)

3.  npm dev run 啓動項目(或者npm dev serve

4.出現啓動成功界面,瀏覽器輸入地址既可訪問


第三章nginx代理vue項目

1.若不記得目錄可以用 whereis命令找

2.進入/usr/local/nginx/conf/配置目錄,修改nginx.conf文件

3.vim nginx.conf修改配置

意思是訪問localhost:80/zhsywx目錄會去/opt/deploy/qc-xx-wx/zhsywx下面找項目

4.在/opt/svn/emembership/code/qc-wisdomship-wx目錄中(SVN提交目錄)用npm run build命令打包好;會在qc-xx-wx的目錄下生成dist文件夾;再mv dist/* /opt/deploy/qc-xx-wx/zhsywx/移動到Nginx代理目錄;如果是第二次部署就用

\cp -fr dist/* /opt/deploy/qc-xx-wx/zhsywx/強制替換命令,替換掉Nginx代理目錄的下的dist;裏的內容

5.在瀏覽器輸入Nginx代理的目錄http://ip/zhsywx/,可以看到部署代理成功了

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章