在Linux服務(wù)器上部署vue項目
案例一
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電子簽章的思路詳解
最近領(lǐng)導(dǎo)提了一個新需求:仿照e簽寶,實現(xiàn)pdf電子簽章,本文給大家介紹vue使用pdfjs-dist+fabric實現(xiàn)pdf電子簽章的思路,感興趣的朋友一起看看吧2023-12-12vue如何實現(xiàn)左右滑動tab(vue-touch)
這篇文章主要介紹了vue如何實現(xiàn)左右滑動tab(vue-touch),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07詳解vue-template-admin三級路由無法緩存的解決方案
這篇文章主要介紹了vue-template-admin三級路由無法緩存的解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03vue+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(),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05Vue中實現(xiàn)3D標(biāo)簽云的詳細(xì)代碼
本文通過實例代碼給大家介紹vue實現(xiàn)3D標(biāo)簽云的方法,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2021-07-07