快捷導(dǎo)航

一篇文章教會(huì)你部署vue項(xiàng)目到docker

更新時(shí)間：2022年04月05日 11:34:29 作者：mad?man

在前端開(kāi)發(fā)中,部署項(xiàng)目是我們經(jīng)常發(fā)生的事情,下面這篇文章主要給大家介紹了關(guān)于部署vue項(xiàng)目到docker的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

第一步

server {
listen 80;
server_name localhost; # docker服務(wù)宿主機(jī)的ip
 
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
 
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}

寫(xiě)docker鏡像配置

FROM nginx
MAINTAINER yaohuowang
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/
COPY dist/ /usr/share/nginx/html/

第二步，生成鏡像

來(lái)到當(dāng)前文件夾，輸入命令 docker build -t yaohot .

注意圖上打錯(cuò)字了，yoahou，以圖片的命令為主

然后構(gòu)建鏡像完成

第三步，生成(啟動(dòng))一個(gè)容器

命令：docker run -d -p 86:80 --name houtai yaohot

ok

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目中jsonp跨域獲取qq音樂(lè)首頁(yè)推薦問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中jsonp跨域獲取qq音樂(lè)首頁(yè)推薦問(wèn)題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-05-05
Vue $router.push打開(kāi)新窗口的實(shí)現(xiàn)方法
在Vue中,$router.push方法默認(rèn)不支持在新窗口中打開(kāi)頁(yè)面,但通過(guò)結(jié)合window.open方法和$router.resolve方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-09-09
Vue mixins詳解與使用技巧
Vue mixins提供了一個(gè)非常靈活的方式來(lái)分發(fā)Vue組件中的可復(fù)用功能,通過(guò)全局混入和局部混入,可以將預(yù)定義的方法、數(shù)據(jù)等混合到Vue組件中,這種技術(shù)可以簡(jiǎn)化代碼,提高開(kāi)發(fā)效率,并允許在不同組件間共享功能
2024-09-09
Vue SPA 如何解決瀏覽器緩存問(wèn)題
這篇文章主要介紹了Vue SPA 如何解決瀏覽器緩存問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue3.0?移動(dòng)端二次封裝van-uploader實(shí)現(xiàn)上傳圖片(vant組件庫(kù))
這篇文章主要介紹了vue3.0?移動(dòng)端二次封裝van-uploader上傳圖片組件,此功能最多上傳6張圖片，并可以實(shí)現(xiàn)本地預(yù)覽，實(shí)現(xiàn)代碼簡(jiǎn)單易懂，需要的朋友可以參考下
2022-05-05
詳解在vue使用weixin-js-sdk常見(jiàn)使用方法
這篇文章主要介紹了詳解在vue使用weixin-js-sdk常見(jiàn)使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
vue實(shí)現(xiàn)元素拖動(dòng)并互換位置的實(shí)現(xiàn)代碼
在使用Vue的場(chǎng)景下,需要實(shí)現(xiàn)對(duì)元素進(jìn)行拖動(dòng)交換位置,接下來(lái)通過(guò)本文給大家介紹vue實(shí)現(xiàn)元素拖動(dòng)并互換位置的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2023-09-09
Vue+OpenLayer為地圖添加風(fēng)場(chǎng)效果
這篇文章主要為大家展示了一個(gè)demo，即利用Vue和OpenLayer在地圖上面添加風(fēng)場(chǎng)效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下
2022-04-04
petite?vue的使用示例詳解
這篇文章主要為大家介紹了petite?vue的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
vue項(xiàng)目如何引入json數(shù)據(jù)
這篇文章主要介紹了vue項(xiàng)目如何引入json數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10