耽誤了幾天, 終于開始寫第二篇博客了, 這篇會講怎么將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 按回車 , 顯示正在打包..稍等一會

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 .然后會看到右側(cè)出現(xiàn)了新建會話的窗口 , 表示連接到服務(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)打開面板 ,會在瀏覽器中打開, 點(diǎn)登錄 (寶塔安裝和配置有不懂的可以搜一下別的博客,有詳細(xì)介紹)

2 , 登錄之后是這樣的, 點(diǎn)左邊的軟件管理

3 , 頂部的應(yīng)用搜索 nginx , 找到之后點(diǎn)右邊的安裝

4 , 安裝完后在第二頁 , 點(diǎn)右邊的設(shè)置

5 , 彈出一個(gè)框 , 點(diǎn)左邊的配置修改 ,滾動(dòng)條拉到下面,按下圖標(biāo)的修改后點(diǎn)保存

6 , 保存完之后點(diǎn)左邊的服務(wù) , 點(diǎn)重啟

7 , 部署成功!! 打開瀏覽器，輸入服務(wù)器ip地址，訪問一首頁的內(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論