在Linux服務(wù)器上部署vue項(xiàng)目

更新時間：2021年11月28日 13:06:14 作者：c03

這篇文章介紹了在Linux服務(wù)器上部署vue項(xiàng)目的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

案例一

vue-cli構(gòu)建vue3項(xiàng)目，將項(xiàng)目上傳到Linux服務(wù)器，服務(wù)器安裝node，并啟動vue項(xiàng)目

首先本地有一個vue項(xiàng)目，啟動后可正常訪問

本地打包后，也可直接訪問

若打包后的index.html頁面顯示空白，需在項(xiàng)目的根路徑下新建vue.config.js，再重新打包，參考

Linux服務(wù)器安裝nodejs，參考

# 下載node壓縮包，在哪條路徑下執(zhí)行該命令，就會下載到哪條路徑下
  wget https://npm.taobao.org/mirrors/node/v12.16.1/node-v12.16.1-linux-x64.tar.gz      
# 將壓縮包剪切到/usr/local/bin/路徑下，并解壓   
  tar -xvf node-v12.16.1-linux-x64.tar.gz       
# 修改文件夾名稱為NodeJs   
  mv node-v12.16.1-linux-x64 NodeJs  
# 安裝gcc        
  yum install gcc gcc-c++            
# 在/usr/local/bin/NodeJs/bin路徑下有三個文件：node  npm  npx
# 為這三個文件設(shè)置軟連接，/usr/bin目錄用于存放系統(tǒng)命令，此時在任意路徑下執(zhí)行：node  相當(dāng)于是執(zhí)行/usr/local/bin/NodeJs/bin/node路徑下的文件，執(zhí)行node后會進(jìn)入node環(huán)境
  ln -s /usr/local/bin/NodeJs/bin/node /usr/bin/node         
  ln -s /usr/local/bin/NodeJs/bin/npm /usr/bin/npm          
  ln -s /usr/local/bin/NodeJs/bin/npx /usr/bin/npx         
# 進(jìn)入根目錄
  cd
# 驗(yàn)證
  node

將vue項(xiàng)目上傳到Linux服務(wù)器，編譯運(yùn)行

# 進(jìn)入vue項(xiàng)目的根目錄
  cd /home/web
# 安裝依賴
  npm install
# 編譯打包
  npm run build
# 啟動項(xiàng)目
  npm run serve

測試

錯誤總結(jié)

在Linux服務(wù)器上編譯項(xiàng)目時報錯如下，說明node版本過低，參考

在Linux服務(wù)器上編譯項(xiàng)目時報錯如下，說明node版本17.1.0過高

解決方案，參考

# 若之前使用yum安裝的node，需卸載后重新安裝，安裝步驟參考本篇博客中使用`源碼包`的方法安裝
# 卸載nodejs
  yum remove nodejs npm -y
# 進(jìn)入 /usr/local/lib 刪除所有 node 和 node_modules文件夾
# 進(jìn)入 /usr/local/include 刪除所有 node 和 node_modules 文件夾
# 進(jìn)入 /usr/local/bin 刪除 node 的可執(zhí)行文件

若編譯、啟動項(xiàng)目時報錯權(quán)限不足

解決方案

# 將指定文件設(shè)置權(quán)限
  chmod 777 /home/web/xxx

運(yùn)行項(xiàng)目時報錯：warnings potentially fixable with the --fix option

解決方案，將項(xiàng)目中package.json中"lint": "vue-cli-service lint" 修改為：eslint --fix --ext .js,.vue src

參考

案例二

vue-cli構(gòu)建vue3項(xiàng)目，打包后將dist文件放到tomcat上

Linux服務(wù)器安裝tomcat

# 用docker拉取tomcat容器
  docker pull tomcat   
# 后臺啟動       
  docker run -d -p 8080:8080 tomcat    
# 啟動后瀏覽器訪問 http://192.168.0.102:8080/ 返回404
# 解決方案：
# 對外開放8080端口
  firewall-cmd --zone=public --add-port=8080/tcp --permanent  
# 重啟防火墻生效 
  firewall-cmd --reload     
# 進(jìn)入tomcat容器
  docker exec -it 正在運(yùn)行的容器id /bin/bash     
# 將webapps.dist目錄下的所有文件復(fù)制到webapps路徑下
  cp -r webapps.dist/* ./webapps        
# 刪除webapps.dist目錄
  rm -rf webapps.dist           
# 此時能通過瀏覽器訪問到tomcat頁面了，但tomcat鏡像重啟后依舊404，需將當(dāng)前修改后的容器提交為一個新的鏡像
# 不停止容器的情況下退出
  ctrl + p + q                  
# 在容器運(yùn)行狀態(tài)下提交自定義的容器，tomcat10:10.1是我自定義的鏡像名稱和版本號
  docker commit -a="作者" -m="備注" 正在運(yùn)行的容器id tomcat10:10.1       
# 停止當(dāng)前tomcat容器  
  docker stop 正在運(yùn)行的容器id    
# 刪除該容器
  docker rm 運(yùn)行后的容器id    
# 啟動自己提交的鏡像
  docker run -d -p 8080:8080 tomcat10:10.1         
 
# 補(bǔ)充
# 啟動tomcat鏡像的時候報錯：driver failed programming external connectivity on endpoint quirky_allen
# 錯誤原因：之前啟動后端項(xiàng)目時占用了8080端口，需將后端項(xiàng)目結(jié)束
 
# 測試，訪問 http://192.168.0.102:8080 看到tomcat頁面說明啟動成功

將打包后的項(xiàng)目放到tomcat容器

# 創(chuàng)建共享文件夾
  mkdir -p /home/mydocker/mytomcat8080/data
# 啟動容器8080：
  docker run \
  -p 8080:8080 \
  --name my-tomcat8080 \
  -v /home/mydocker/mytomcat8080/data:/usr/local/tomcat/webapps \
  -d \
  tomcat10:10.1
# 啟動容器時報錯：docker: invalid reference format.
# 錯誤原因：docker命令寫錯了，我這里是-v /home/mydocker/mytomcat8080/data:/usr/local/tomcat/webapps \  冒號后面多了一個空格
# 進(jìn)入vue項(xiàng)目根目錄，打包后生成dist文件夾，這里我們還是使用案例一中的項(xiàng)目
  npm install
  npm run bulid
# 將打包后的文件復(fù)制到tomcat
  mv dist /home/mydocker/mytomcat8080/data
# 重啟tomcat容器
  docker restart tomcat容器id
# 測試，本地訪問 http://192.168.0.102:8080/dist/