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/

說明

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鏡像里的默認配置COPY dist/ /usr/share/nginx/html/：將項目根目錄下dist文件夾（構(gòu)建之后才會生成）下的所有文件復(fù)制到鏡像/usr/share/nginx/html/目錄下

4. 創(chuàng)建鏡像

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

執(zhí)行如下命令，注意最后有個點

docker build -t my-web .

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

5. 創(chuàng)建容器

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

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

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

總結(jié)

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

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