欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2021年11月28日 13:06:14   作者:c03  
這篇文章介紹了在Linux服務(wù)器上部署vue項目的方法,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

案例一

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

首先本地有一個vue項目,啟動后可正常訪問

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

若打包后的index.html頁面顯示空白,需在項目的根路徑下新建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
# 驗證
  node

將vue項目上傳到Linux服務(wù)器,編譯運行

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

測試

錯誤總結(jié)

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

在Linux服務(wù)器上編譯項目時報錯如下,說明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í)行文件

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

解決方案

# 將指定文件設(shè)置權(quán)限
  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-cli構(gòu)建vue3項目,打包后將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 正在運行的容器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                  
# 在容器運行狀態(tài)下提交自定義的容器,tomcat10:10.1是我自定義的鏡像名稱和版本號
  docker commit -a="作者" -m="備注" 正在運行的容器id tomcat10:10.1       
# 停止當(dāng)前tomcat容器  
  docker stop 正在運行的容器id    
# 刪除該容器
  docker rm 運行后的容器id    
# 啟動自己提交的鏡像
  docker run -d -p 8080:8080 tomcat10:10.1         
 
# 補充
# 啟動tomcat鏡像的時候報錯:driver failed programming external connectivity on endpoint quirky_allen
# 錯誤原因:之前啟動后端項目時占用了8080端口,需將后端項目結(jié)束
 
# 測試,訪問 http://192.168.0.102:8080 看到tomcat頁面說明啟動成功

將打包后的項目放到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項目根目錄,打包后生成dist文件夾,這里我們還是使用案例一中的項目
  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/

到此這篇關(guān)于在Linux服務(wù)器上部署vue項目的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue使用pdfjs-dist+fabric實現(xiàn)pdf電子簽章的思路詳解

    vue使用pdfjs-dist+fabric實現(xiàn)pdf電子簽章的思路詳解

    最近領(lǐng)導(dǎo)提了一個新需求:仿照e簽寶,實現(xiàn)pdf電子簽章,本文給大家介紹vue使用pdfjs-dist+fabric實現(xiàn)pdf電子簽章的思路,感興趣的朋友一起看看吧
    2023-12-12
  • vue如何實現(xiàn)左右滑動tab(vue-touch)

    vue如何實現(xiàn)左右滑動tab(vue-touch)

    這篇文章主要介紹了vue如何實現(xiàn)左右滑動tab(vue-touch),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • 簡單了解vue.js數(shù)組的常用操作

    簡單了解vue.js數(shù)組的常用操作

    這篇文章主要介紹了簡單了解vue.js數(shù)組的常用操作,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,,需要的朋友可以參考下
    2019-06-06
  • 詳解vue-template-admin三級路由無法緩存的解決方案

    詳解vue-template-admin三級路由無法緩存的解決方案

    這篇文章主要介紹了vue-template-admin三級路由無法緩存的解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-03-03
  • vue實現(xiàn)登陸頁面開發(fā)實踐

    vue實現(xiàn)登陸頁面開發(fā)實踐

    本文主要介紹了vue實現(xiàn)登陸頁面開發(fā)實踐,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-05-05
  • Vue3中關(guān)于ref和reactive的問題

    Vue3中關(guān)于ref和reactive的問題

    這篇文章主要介紹了Vue3中關(guān)于ref和reactive的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • vue+element-ui+axios實現(xiàn)圖片上傳

    vue+element-ui+axios實現(xiàn)圖片上傳

    這篇文章主要為大家詳細(xì)介紹了vue+element-ui+axios實現(xiàn)圖片上傳,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-08-08
  • 詳解vue-router 2.0 常用基礎(chǔ)知識點之router.push()

    詳解vue-router 2.0 常用基礎(chǔ)知識點之router.push()

    本篇文章主要介紹了vue-router 2.0 常用基礎(chǔ)知識點之router.push(),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05
  • vue實現(xiàn)密碼顯示隱藏功能的思路詳解

    vue實現(xiàn)密碼顯示隱藏功能的思路詳解

    這篇文章主要介紹了vue實現(xiàn)密碼顯示隱藏功能的思路詳解,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-03-03
  • Vue中實現(xiàn)3D標(biāo)簽云的詳細(xì)代碼

    Vue中實現(xiàn)3D標(biāo)簽云的詳細(xì)代碼

    本文通過實例代碼給大家介紹vue實現(xiàn)3D標(biāo)簽云的方法,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2021-07-07

最新評論