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 nginxMAINTAINER fuhbRUN rm /etc/nginx/conf.d/default.confADD default.conf /etc/nginx/conf.d/COPY dist/ /usr/share/nginx/html/

說(shuō)明

FROM nginx：該鏡像是基于nginx:latest鏡像構(gòu)建的MAINTAINER fuhb：添加說(shuō)明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配置來(lái)替換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í)可以通過(guò)10002端口號(hào)訪問(wèn)VUE站點(diǎn)。

總結(jié)

以上是生活随笔為你收集整理的Docker环境运行Vue项目的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。