部署vue項目到Linux服務器

• 2021 年 11 月 28 日
• 筆記
• linux, vue.js, 服務器

案例一

• vue-cli構建vue3項目，將項目上傳到Linux服務器，服務器安裝node，並啟動vue項目

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

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

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

• Linux服務器安裝nodejs，參考

# 下載node壓縮包，在哪條路徑下執行該命令，就會下載到哪條路徑下
  wget //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
  
• 參考