vue項(xiàng)目打包后部署到服務(wù)器的詳細(xì)步驟
耽誤了幾天, 終于開始寫第二篇博客了, 這篇會(huì)講怎么將vue項(xiàng)目打包部署到服務(wù)器, 其實(shí)和上一篇的uni-app步驟一樣的, 就是最后多了一步修改nginx配置, 好 , 上操作
一 ,打包項(xiàng)目
vscode下載鏈接：
鏈接: https://pan.baidu.com/s/1PD-Sts-e2V17wSs5FvrLmg
提取碼: 2jbf
1 , vscode打開你的vue項(xiàng)目 -- > 點(diǎn)終端- > 新終端- >輸入npm run build 按回車 , 顯示正在打包..稍等一會(huì)
2 , 打包成功 , 生成了dist文件夾, 打包好的文件存放在里面
二 , 用一個(gè)工具, 把打包好的文件上傳到你的服務(wù)器 , 我用的是Xftp , 用別的工具也可以
下載鏈接：
鏈接: https://pan.baidu.com/s/18KLWFCff8rPZHS5Ys0JlBA
提取碼: 4chh
1.打開Xftp, 點(diǎn)小窗口的新建
2 .點(diǎn)完之后彈出這個(gè)框, 填寫完信息之后點(diǎn)連接 , 服務(wù)器的相關(guān)信息問公司的人要
3.點(diǎn)完連接之后 , 彈出這個(gè)框 , 點(diǎn)接受并保存
4 .然后會(huì)看到右側(cè)出現(xiàn)了新建會(huì)話的窗口 , 表示連接到服務(wù)器了,
左側(cè)是你自己的電腦本地, 右側(cè)是服務(wù)器電腦
左側(cè)進(jìn)到剛剛打包好的文件存放路徑 , 把dist文件夾復(fù)制到右側(cè)服務(wù)器中部署的文件夾里, 看你們是部署到哪個(gè)文件夾就拖到哪里
三 , 修改nginx配置,我用的是寶塔面板的方式
寶塔下載鏈接：
鏈接: https://pan.baidu.com/s/1nPvtEYL8IV6Egx265i8ofw
提取碼: zane
1 , 打開寶塔面板, 配置 , 因?yàn)閷毸诒镜貫g覽器中打開, 所以域名就寫本地 127.0.0.1 , 保存配置后點(diǎn)打開面板 ,會(huì)在瀏覽器中打開, 點(diǎn)登錄 (寶塔安裝和配置有不懂的可以搜一下別的博客,有詳細(xì)介紹)
2 , 登錄之后是這樣的, 點(diǎn)左邊的軟件管理
3 , 頂部的應(yīng)用搜索 nginx , 找到之后點(diǎn)右邊的安裝
4 , 安裝完后在第二頁(yè) , 點(diǎn)右邊的設(shè)置
5 , 彈出一個(gè)框 , 點(diǎn)左邊的配置修改 ,滾動(dòng)條拉到下面,按下圖標(biāo)的修改后點(diǎn)保存
6 , 保存完之后點(diǎn)左邊的服務(wù) , 點(diǎn)重啟
7 , 部署成功!! 打開瀏覽器，輸入服務(wù)器ip地址，訪問一首頁(yè)的內(nèi)容吧 ^_^
地址就是服務(wù)器ip/部署的文件夾/index.html#/ , 比如服務(wù)器ip是123.60.120.40:3006,部署的文件夾名字是app, 地址就是如下 (瞎寫的)
http://123.60.120.40:3006/app/index.html#/
到此這篇關(guān)于vue項(xiàng)目打包后部署到服務(wù)器的文章就介紹到這了,更多相關(guān)vue打包部署服務(wù)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
ElementUI實(shí)現(xiàn)el-form表單重置功能按鈕
本文主要介紹了Element使用el-form時(shí)，點(diǎn)擊重置按鈕或者取消按鈕時(shí)會(huì)實(shí)現(xiàn)表單重置效果，具有一定的參考價(jià)值，感興趣的可以了解一下2021-07-07
vue父元素點(diǎn)擊事件與子元素點(diǎn)擊事件沖突問題
這篇文章主要介紹了vue父元素點(diǎn)擊事件與子元素點(diǎn)擊事件沖突問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue調(diào)用原生方法交互，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue儲(chǔ)存storage時(shí)含有布爾值的解決方案
這篇文章主要介紹了vue儲(chǔ)存storage時(shí)含有布爾值的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-06-06
vue+electron 自動(dòng)更新的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+electron 自動(dòng)更新的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-02-02
這篇文章主要介紹了Vue.js仿微信聊天窗口展示組件功能,需要的朋友可以參考下2017-08-08
vue中獲取滾動(dòng)table的可視頁(yè)面寬度調(diào)整表頭與列對(duì)齊(每列寬度不都相同)
這篇文章主要介紹了vue中獲取滾動(dòng)table的可視頁(yè)面寬度，調(diào)整表頭與列對(duì)齊(每列寬度不都相同),需要的朋友可以參考下2019-08-08
vuex實(shí)現(xiàn)簡(jiǎn)易計(jì)數(shù)器
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)一個(gè)簡(jiǎn)易計(jì)數(shù)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
關(guān)于Vue?"__ob__:Observer"屬性的解決方案詳析
在操作數(shù)據(jù)的時(shí)候發(fā)現(xiàn),__ob__: Observer這個(gè)屬性出現(xiàn)之后,如果單獨(dú)拿數(shù)據(jù)的值,就會(huì)返回undefined,下面這篇文章主要給大家介紹了關(guān)于Vue?"__ob__:Observer"屬性的解決方案,需要的朋友可以參考下2022-11-11
vuex(vue狀態(tài)管理)的特殊應(yīng)用案例分享
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。2020-03-03