vue項目打包后部署到服務(wù)器的詳細(xì)步驟
耽誤了幾天, 終于開始寫第二篇博客了, 這篇會講怎么將vue項目打包部署到服務(wù)器, 其實和上一篇的uni-app步驟一樣的, 就是最后多了一步修改nginx配置, 好 , 上操作
一 ,打包項目
vscode下載鏈接:
鏈接: https://pan.baidu.com/s/1PD-Sts-e2V17wSs5FvrLmg
提取碼: 2jbf
1 , vscode打開你的vue項目 -- > 點終端- > 新終端- >輸入npm run build 按回車 , 顯示正在打包..稍等一會
2 , 打包成功 , 生成了dist文件夾, 打包好的文件存放在里面
二 , 用一個工具, 把打包好的文件上傳到你的服務(wù)器 , 我用的是Xftp , 用別的工具也可以
下載鏈接:
鏈接: https://pan.baidu.com/s/18KLWFCff8rPZHS5Ys0JlBA
提取碼: 4chh
1.打開Xftp, 點小窗口的新建
2 .點完之后彈出這個框, 填寫完信息之后點連接 , 服務(wù)器的相關(guān)信息問公司的人要
3.點完連接之后 , 彈出這個框 , 點接受并保存
4 .然后會看到右側(cè)出現(xiàn)了新建會話的窗口 , 表示連接到服務(wù)器了,
左側(cè)是你自己的電腦本地, 右側(cè)是服務(wù)器電腦
左側(cè)進到剛剛打包好的文件存放路徑 , 把dist文件夾復(fù)制到右側(cè)服務(wù)器中部署的文件夾里, 看你們是部署到哪個文件夾就拖到哪里
三 , 修改nginx配置,我用的是寶塔面板的方式
寶塔下載鏈接:
鏈接: https://pan.baidu.com/s/1nPvtEYL8IV6Egx265i8ofw
提取碼: zane
1 , 打開寶塔面板, 配置 , 因為寶塔要在本地瀏覽器中打開, 所以域名就寫本地 127.0.0.1 , 保存配置后點打開面板 ,會在瀏覽器中打開, 點登錄 (寶塔安裝和配置有不懂的可以搜一下別的博客,有詳細(xì)介紹)
2 , 登錄之后是這樣的, 點左邊的軟件管理
3 , 頂部的應(yīng)用搜索 nginx , 找到之后點右邊的安裝
4 , 安裝完后在第二頁 , 點右邊的設(shè)置
5 , 彈出一個框 , 點左邊的配置修改 ,滾動條拉到下面,按下圖標(biāo)的修改后點保存
6 , 保存完之后點左邊的服務(wù) , 點重啟
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項目打包后部署到服務(wù)器的文章就介紹到這了,更多相關(guān)vue打包部署服務(wù)器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
ElementUI實現(xiàn)el-form表單重置功能按鈕
本文主要介紹了Element使用el-form時,點擊重置按鈕或者取消按鈕時會實現(xiàn)表單重置效果,具有一定的參考價值,感興趣的可以了解一下2021-07-07vue中獲取滾動table的可視頁面寬度調(diào)整表頭與列對齊(每列寬度不都相同)
這篇文章主要介紹了vue中獲取滾動table的可視頁面寬度,調(diào)整表頭與列對齊(每列寬度不都相同),需要的朋友可以參考下2019-08-08關(guān)于Vue?"__ob__:Observer"屬性的解決方案詳析
在操作數(shù)據(jù)的時候發(fā)現(xiàn),__ob__: Observer這個屬性出現(xiàn)之后,如果單獨拿數(shù)據(jù)的值,就會返回undefined,下面這篇文章主要給大家介紹了關(guān)于Vue?"__ob__:Observer"屬性的解決方案,需要的朋友可以參考下2022-11-11vuex(vue狀態(tài)管理)的特殊應(yīng)用案例分享
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。2020-03-03