部署vue專案到Linux伺服器

c03發表於2021-11-28
VueLinux伺服器

案例一

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

  • 首先本地有一個vue專案，啟動後可正常訪問

  • 本地打包後，也可直接訪問

  • 若打包後的index.html頁面顯示空白，需在專案的根路徑下新建vue.config.js，再重新打包，參考

  • 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專案的根目錄
  cd /home/web
# 安裝依賴
  npm install
# 編譯打包
  npm run build
# 啟動專案
  npm run serve

  • 測試

錯誤總結

  • 在Linux伺服器上編譯專案時報錯如下，說明node版本過低，參考
  • 在Linux伺服器上編譯專案時報錯如下，說明node版本17.1.0過高
  • 解決方案，參考
# 若之前使用yum安裝的node，需解除安裝後重新安裝，安裝步驟參考本篇部落格中使用`原始碼包`的方法安裝
# 解除安裝nodejs
  yum remove nodejs npm -y
# 進入 /usr/local/lib 刪除所有 node 和 node_modules資料夾
# 進入 /usr/local/include 刪除所有 node 和 node_modules 資料夾
# 進入 /usr/local/bin 刪除 node 的可執行檔案
  • 若編譯、啟動專案時報錯許可權不足
  • 解決方案
# 將指定檔案設定許可權
  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
  • 參考

相關文章