第一章 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界面
自動分配一個地址,輸入後成功訪問效果圖
至此,vue的linux環境就搭建完畢
第二章 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/,可以看到部署代理成功了