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