快捷導(dǎo)航

Docker環(huán)境運(yùn)行Vue項(xiàng)目全過程

更新時(shí)間：2025年06月21日 10:19:08 作者：°Fuhb

這篇文章主要介紹了Docker環(huán)境運(yùn)行Vue項(xiàng)目全過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

1. 打包VUE工程

在vue工程根目錄下，執(zhí)行打包命令

npm run build

隨后將生成 dist文件夾，里面的內(nèi)容就是打包后的文件

2. 創(chuàng)建Nginx配置文件

在vue工程根目錄下，創(chuàng)建文件 default.conf，內(nèi)容如下：

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html/;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
}

3. 創(chuàng)建Dockerfile

在vue工程根目錄下，創(chuàng)建文件 Dockerfile，內(nèi)容如下：

FROM nginx

MAINTAINER fuhb

RUN rm /etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/

COPY dist/ /usr/share/nginx/html/

說明

FROM nginx：該鏡像是基于nginx:latest鏡像構(gòu)建的
MAINTAINER fuhb：添加說明
RUN rm /etc/nginx/conf.d/default.conf：刪除nginx自帶的default.conf配置文件
ADD default.conf /etc/nginx/conf.d/：將default.conf復(fù)制到/etc/nginx/conf.d/下，用本地的default.conf配置來替換nginx鏡像里的默認(rèn)配置
COPY dist/ /usr/share/nginx/html/：將項(xiàng)目根目錄下dist文件夾（構(gòu)建之后才會(huì)生成）下的所有文件復(fù)制到鏡像/usr/share/nginx/html/目錄下

4. 創(chuàng)建鏡像

把dist、default.conf、Dockerfile放在同一個(gè)目錄下，例如 /usr/local/docker/web/

執(zhí)行如下命令，注意最后有個(gè)點(diǎn)

docker build -t my-web .

執(zhí)行命令docker images，會(huì)發(fā)現(xiàn)生成了一份名為 my-web的鏡像

5. 創(chuàng)建容器

鏡像已經(jīng)有了，下一步就可以創(chuàng)建并運(yùn)行容器了，執(zhí)行如下命令

docker run -d --name my_web -p 10002:80 my-web

然后執(zhí)行 docker ps -a ，會(huì)發(fā)現(xiàn)容器成功創(chuàng)建并運(yùn)行了，此時(shí)可以通過10002端口號(hào)訪問VUE站點(diǎn)。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Docker?AIGC等大模型深度學(xué)習(xí)環(huán)境搭建步驟最新詳細(xì)版
這篇文章主要介紹了Docker?AIGC等大模型深度學(xué)習(xí)環(huán)境搭建步驟最新詳細(xì)版,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-05-05
docker compose 一鍵部署分布式配置中心Apollo的過程詳解
這篇文章主要介紹了docker compose 一鍵部署分布式配置中心Apollo,今天我們使用Docker來進(jìn)行搭建,畢竟Docker對(duì)于開發(fā)者來說更友好一些，需要的朋友可以參考下
2021-09-09
docker部署gitlab以及修改初始密碼方式
這篇文章主要介紹了docker部署gitlab以及修改初始密碼方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-05-05
docker拉取鏡像超時(shí)解決的問題解決
本文解決了由于網(wǎng)絡(luò)問題導(dǎo)致的Docker拉取中央倉庫鏡像超時(shí)的問題,通過從其他鏡像倉庫拉取鏡像文件來解決這一問題,感興趣的可以了解一下
2025-03-03
使用Docker搭建私有PyPI鏡像倉庫的完整步驟教學(xué)
在企業(yè)內(nèi)網(wǎng)或離線開發(fā)環(huán)境中,我們常常需要一個(gè)穩(wěn)定、快速且可控制的 Python 包管理方案,本文將詳細(xì)介紹如何使用 devpi 和 Docker 構(gòu)建一個(gè)私有的 PyPI 鏡像服務(wù)器,有需要的小伙伴可以了解下
2025-09-09
Linux下Docker安裝配置教程
這篇文章主要為大家詳細(xì)介紹了Linux下Docker安裝配置教程，步驟簡單清晰,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
docker inspect 命令使用技巧
這篇文章主要介紹了docker inspect 命令使用技巧，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
刪除docker中沒有被使用的數(shù)據(jù)卷volume
發(fā)現(xiàn)docker占用宿主機(jī)的磁盤空間很大，這個(gè)時(shí)候如何來釋放這些數(shù)據(jù)卷占用的空間呢，通過執(zhí)行相關(guān)命令即可順利解決，下面小編給大家介紹下刪除docker中沒有被使用的數(shù)據(jù)卷volume，感興趣的朋友跟隨小編一起看看吧
2023-01-01
docker部署nginx下日志自動(dòng)切割方法實(shí)現(xiàn)
部署Nginx在Docker中時(shí),其日志文件默認(rèn)不會(huì)自動(dòng)切割,與非Docker環(huán)境有所不同,本文介紹了三種日志切割方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-10-10
詳解Windows?利用?WSL2?安裝?Docker?的2種方式
這篇文章主要介紹了Windows?利用?WSL2?安裝?Docker?的2種方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-10-10