部署vue專案到Linux伺服器

c03 發表於 2021-11-28
Linux Vue

案例一

  • vue-cli構建vue3專案,將專案上傳到Linux伺服器,伺服器安裝node,並啟動vue專案

  • 首先本地有一個vue專案,啟動後可正常訪問
    部署vue專案到Linux伺服器

  • 本地打包後,也可直接訪問
    部署vue專案到Linux伺服器
    部署vue專案到Linux伺服器

  • 若打包後的index.html頁面顯示空白,需在專案的根路徑下新建vue.config.js,再重新打包,參考
    部署vue專案到Linux伺服器

  • Linux伺服器安裝nodejs,參考

# 下載node壓縮包,在哪條路徑下執行該命令,就會下載到哪條路徑下
  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
# 為這三個檔案設定軟連線,/usr/bin目錄用於存放系統命令,此時在任意路徑下執行:node  相當於是執行/usr/local/bin/NodeJs/bin/node路徑下的檔案,執行node後會進入node環境
  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         
# 進入根目錄
  cd
# 驗證
  node

部署vue專案到Linux伺服器

  • 將vue專案上傳到Linux伺服器,編譯執行
# 進入vue專案的根目錄
  cd /home/web
# 安裝依賴
  npm install
# 編譯打包
  npm run build
# 啟動專案
  npm run serve

部署vue專案到Linux伺服器

  • 測試
    部署vue專案到Linux伺服器

錯誤總結

  • 在Linux伺服器上編譯專案時報錯如下,說明node版本過低,參考
    部署vue專案到Linux伺服器
  • 在Linux伺服器上編譯專案時報錯如下,說明node版本17.1.0過高
    部署vue專案到Linux伺服器
  • 解決方案,參考
# 若之前使用yum安裝的node,需解除安裝後重新安裝,安裝步驟參考本篇部落格中使用`原始碼包`的方法安裝
# 解除安裝nodejs
  yum remove nodejs npm -y
# 進入 /usr/local/lib 刪除所有 node 和 node_modules資料夾
# 進入 /usr/local/include 刪除所有 node 和 node_modules 資料夾
# 進入 /usr/local/bin 刪除 node 的可執行檔案

  • 若編譯、啟動專案時報錯許可權不足
    部署vue專案到Linux伺服器
  • 解決方案
# 將指定檔案設定許可權
  chmod 777 /home/web/xxx

  • 執行專案時報錯:warnings potentially fixable with the --fix option
  • 解決方案,將專案中package.json中"lint": "vue-cli-service lint" 修改為:eslint --fix --ext .js,.vue src
    部署vue專案到Linux伺服器
  • 參考