Vue項(xiàng)目打包并發(fā)布的完整步驟記錄
如何將Vue項(xiàng)目打包并發(fā)布?我這邊是測(cè)試發(fā)布到本地,不過(guò)步驟是一樣的,步驟如下:
1、安裝部署Nginx服務(wù)器。(類似Tomcat服務(wù)器)
說(shuō)明:Nginx (engine x) 是一個(gè)高性能的HTTP和反向代理服務(wù)器,也是一個(gè)IMAP/POP3/SMTP服務(wù)器。同時(shí),也是一種輕量級(jí)的Web服務(wù)器,可以作為獨(dú)立的服務(wù)器部署網(wǎng)站。
(1)官方下載網(wǎng)址:http://nginx.org/
(2)下載之后,得到 nginx-1.21.6.zip 類似的壓縮文件,解壓到你想要的目錄下。(特別注意:不要運(yùn)行其中的nginx.exe文件?。。。?/p>
(3)使用cd命令到達(dá)nginx的加壓縮后的目錄:
D:\Tools>cd nginx-1.21.6
(4)啟動(dòng)nginx服務(wù),啟動(dòng)時(shí)會(huì)一閃而過(guò)是正常的:
D:\Tools\nginx-1.21.6>start nginx
(5)查看任務(wù)進(jìn)程是否存在:
D:\Tools\nginx-1.21.6>tasklist /fi "imagename eq nginx.exe"
(備注:如果沒(méi)有啟動(dòng)報(bào)錯(cuò)了查看一下日志,在nginx目錄中的logs文件夾下error.log是日志文件。常見(jiàn)的錯(cuò)誤只要有:端號(hào)被占用或者nginx文件路徑有中文)
(6)修改配置文件,進(jìn)入解壓縮目錄,找到nginx.conf配置文件并修改。(這個(gè)根據(jù)自己需要)
(7)修改完成后保存,使用以下命令檢查一下配置文件是否正確,后面是nginx.conf文件的路徑,successful就說(shuō)明正確了。
D:\Tools\nginx-1.21.6>nginx -t -c D:/Tools/nginx-1.21.6/conf/nginx.conf
(8)加載配置文件并重啟nginx。
D:\Tools\nginx-1.21.6>nginx -s reload
(9)打開(kāi)瀏覽器訪問(wèn)剛才的域名及端口(我本地是:http://localhost:8800),出現(xiàn)歡迎頁(yè)就說(shuō)明部署成功了
2、Vue項(xiàng)目打包。
(1)新建終端,執(zhí)行如下命令:
npm run build
命令執(zhí)行成功之后,項(xiàng)目目錄下會(huì)生成一個(gè)dist文件夾 (里面包含:static文件夾和index.html文件)。--打包成功
(2)把dist文件夾下的所有文件復(fù)制到之前配置的nginx默認(rèn)主頁(yè)目錄下(也可以是自己設(shè)置的網(wǎng)站目錄)。
至此,Vue項(xiàng)目打包并本地發(fā)布成功。
總結(jié)
到此這篇關(guān)于Vue項(xiàng)目打包并發(fā)布的文章就介紹到這了,更多相關(guān)Vue項(xiàng)目打包發(fā)布內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue2.0和mintui-infiniteScroll結(jié)合如何實(shí)現(xiàn)無(wú)線滾動(dòng)加載
這篇文章主要介紹了vue2.0和mintui-infiniteScroll結(jié)合如何實(shí)現(xiàn)無(wú)線滾動(dòng)加載,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue3中使用Element-Plus的el-upload組件限制只上傳一個(gè)文件的功能實(shí)現(xiàn)
在 Vue 3 中使用 Element-Plus 的 el-upload 組件進(jìn)行文件上傳時(shí),有時(shí)候需要限制只能上傳一個(gè)文件,本文將介紹如何通過(guò)配置 el-upload 組件實(shí)現(xiàn)這個(gè)功能,讓你的文件上傳變得更加簡(jiǎn)潔和易用,需要的朋友可以參考下2023-10-10vue刷新頁(yè)面時(shí)去閃爍提升用戶體驗(yàn)效果的實(shí)現(xiàn)方法
這篇文章主要介紹了vue刷新頁(yè)面時(shí)去閃爍提升體驗(yàn)方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12axios簡(jiǎn)單實(shí)現(xiàn)小程序延時(shí)loading指示
這篇文章主要介紹了axios簡(jiǎn)單實(shí)現(xiàn)小程序延時(shí)loading指示,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07淺談vue項(xiàng)目4rs vue-router上線后history模式遇到的坑
今天小編就為大家分享一篇淺談vue項(xiàng)目4rs vue-router上線后history模式遇到的坑,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09ElementUI對(duì)table的指定列進(jìn)行合算
本文主要介紹了ElementUI對(duì)table的指定列進(jìn)行合算,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03Vue實(shí)現(xiàn)手機(jī)橫屏效果的代碼示例
有時(shí)候一些頁(yè)面希望在手機(jī)上可以實(shí)現(xiàn)橫屏的效果,比如播放頁(yè)面,所以本文我們講給大家介紹Vue如何實(shí)現(xiàn)手機(jī)橫屏效果,文章通過(guò)代碼示例介紹的非常詳細(xì),感興趣的同學(xué)跟著小編一起來(lái)看看吧2023-08-08Vue時(shí)間軸 vue-light-timeline的用法說(shuō)明
這篇文章主要介紹了Vue時(shí)間軸 vue-light-timeline的用法說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10