快捷導(dǎo)航

vue.js項(xiàng)目nginx部署教程

更新時(shí)間：2018年04月05日 17:04:39 投稿：mrr

nginx是一個(gè)高性能的HTTP和反向代理服務(wù)器。這篇文章主要介紹了vue.js項(xiàng)目nginx部署,需要的朋友可以參考下

nginx是一個(gè)高性能的HTTP和反向代理服務(wù)器。因此常用來做靜態(tài)資源服務(wù)器和后端的反向代理服務(wù)器。本文主要記錄使用nginx去部署使用vue搭建的前端項(xiàng)目，項(xiàng)目基于vue官方的腳手架vue-cli構(gòu)建。

開發(fā)環(huán)境搭建完成。

二、編譯部署

1、項(xiàng)目路徑下demo輸入命令npm run build

編譯完成后會(huì)發(fā)現(xiàn)在demo文件夾下多出一個(gè)dist文件夾這里面就是編譯好的文件了。

2、網(wǎng)上下載nginx,下載地址http://nginx.org/en/download.html，解壓下載的nginx文件。

3、配置部署，編輯nginx/conf 下的nginx.conf，修改如下

[/code][

4、啟動(dòng)nginx。命令窗口cd進(jìn)入nginx安裝目錄，輸入start nginx啟動(dòng)nginx。

然后通過瀏覽器訪問http://127.0.0.1:8088/訪問或者h(yuǎn)ttp://域名:8088/訪問

5、nginx停止命令：nginx -s quit

nginx重啟命令：nginx -s reload

總結(jié)

以上所述是小編給大家介紹的vue.js項(xiàng)目nginx部署教程，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

vue cli webpack中使用sass的方法
這篇文章主要介紹了vue cli webpack中使用sass的方法,需要的朋友可以參考下
2018-02-02
解決Vite無法分析出動(dòng)態(tài)import的類型,控制臺(tái)出警告的問題
這篇文章主要介紹了解決Vite無法分析出動(dòng)態(tài)import的類型,控制臺(tái)出警告的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
淺談vue-router路由切換組件重用挖下的坑
今天小編就為大家分享一篇淺談vue-router路由切換組件重用挖下的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
淺談Vue2.0父子組件間事件派發(fā)機(jī)制
本篇文章主要介紹了淺談Vue2.0父子組件間事件派發(fā)機(jī)制，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-01-01
前端Vue通過Minio返回的URL下載文件實(shí)現(xiàn)方法
Minio是一個(gè)靈活、高性能、開源的對(duì)象存儲(chǔ)解決方案,適用于各種存儲(chǔ)需求,并可以與云計(jì)算、容器化、大數(shù)據(jù)和應(yīng)用程序集成,這篇文章主要給大家介紹了關(guān)于前端Vue通過Minio返回的URL下載文件實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2024-07-07
一步步講解Vue如何啟動(dòng)項(xiàng)目
這篇文章主要給大家介紹了關(guān)于Vue如何啟動(dòng)項(xiàng)目的相關(guān)資料,還介紹了解決vue啟動(dòng)項(xiàng)目時(shí)間很長(zhǎng)問題的相關(guān)方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
從vue-router看前端路由的兩種實(shí)現(xiàn)
本文由淺入深觀摩vue-router源碼是如何通過hash與History interface兩種方式實(shí)現(xiàn)前端路由，介紹了相關(guān)原理，并對(duì)比了兩種方式的優(yōu)缺點(diǎn)與注意事項(xiàng)。最后分析了如何實(shí)現(xiàn)可以直接從文件系統(tǒng)加載而不借助后端服務(wù)器的Vue單頁(yè)應(yīng)用。
2021-05-05
vue3+vite中使用import.meta.glob的操作代碼
在vue2的時(shí)候，我們一般引入多個(gè)js或者其他文件，一般使用? require.context 來引入多個(gè)不同的文件，但是vite中是不支持 require的，他推出了一個(gè)功能用import.meta.glob來引入多個(gè)，單個(gè)的文件，下面通過本文介紹vue3+vite中使用import.meta.glob,需要的朋友可以參考下
2022-11-11
vue中使用protobuf的過程記錄
由于目前公司采用了ProtoBuf做前后端數(shù)據(jù)交互，進(jìn)公司以來一直用的是公司大神寫好的基礎(chǔ)庫(kù)，完全不了解底層是如何解析的。下面小編給大家分享vue中使用protobuf的過程記錄，需要的朋友參考下吧
2018-10-10
如何解決前端上傳Formdata中的file為[object?Object]的問題
文件上傳是Web開發(fā)中常見的功能之一,下面這篇文章主要給大家介紹了關(guān)于如何解決前端上傳Formdata中的file為[object?Object]問題的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-07-07