如何將Vue項(xiàng)目打包并發(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項(xiàng)目打包。

（1）新建終端，執(zhí)行如下命令：

npm run build

命令執(zhí)行成功之后，項(xiàng)目目錄下會生成一個dist文件夾 （里面包含：static文件夾和index.html文件）。--打包成功

 （2）把dist文件夾下的所有文件復(fù)制到之前配置的nginx默認(rèn)主頁目錄下（也可以是自己設(shè)置的網(wǎng)站目錄）。

 至此，Vue項(xiàng)目打包并本地發(fā)布成功。

總結(jié)

到此這篇關(guān)于Vue項(xiàng)目打包并發(fā)布的文章就介紹到這了,更多相關(guān)Vue項(xiàng)目打包發(fā)布內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論