1. 打包VUE工程

在vue工程根目录下，执行打包命令

npm run build

随后将生成 dist文件夹，里面的内容就是打包后的文件

2. 创建Nginx配置文件

在vue工程根目录下，创建文件 default.conf，内容如下：

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. 创建Dockerfile

在vue工程根目录下，创建文件 Dockerfile，内容如下：

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镜像构建的MAINTAINER fuhb：添加说明RUN rm /etc/nginx/conf.d/default.conf：删除nginx自带的default.conf配置文件ADD default.conf /etc/nginx/conf.d/：将default.conf复制到/etc/nginx/conf.d/下，用本地的default.conf配置来替换nginx镜像里的默认配置COPY dist/ /usr/share/nginx/html/：将项目根目录下dist文件夹（构建之后才会生成）下的所有文件复制到镜像/usr/share/nginx/html/目录下

4. 创建镜像

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

执行如下命令，注意最后有个点

docker build -t my-web .

执行命令docker images，会发现生成了一份名为 my-web的镜像

5. 创建容器

镜像已经有了，下一步就可以创建并运行容器了，执行如下命令

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

然后执行 docker ps -a ，会发现容器成功创建并运行了，此时可以通过10002端口号访问VUE站点。

Docker环境运行Vue项目相关推荐

Docker环境运行SpringBoot项目
1. 打包Jar 将Spring Boot工程打包成Jar,在工程根目录下执行命令 mvn package 随后,在target目录下生成一份 my-server.jar 2. 创建Dockerfil ...
如何运行vue项目？(详解，建议收藏) ❤️
如何运行vue项目 (详解,建议收藏) 转载首先,列出来我们需要的东西: node.js环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像安装node.js 从no ...
搭建环境创建vue项目
搭建环境创建vue项目 1.安装npm 2.使用淘宝NPM镜像 3.项目初始化 4.命令行创建项目 1.安装npm 下载对应你电脑系统的Node.js版本:下载 | Node.js 中文网具体安装步 ...
在运行vue项目时发生这种 Cannot find module ‘xxxxx‘ ，解决办法？
在运行vue项目时发生这种 Cannot find module 'xxxxx' ,解决办法? 首先,在文件夹中删除掉node_modules文件和package-lock.json文件其次,在使用 ...
运行vue项目时报npm ERR! code ELIFECYCLE错误
运行vue项目时报npm ERR! code ELIFECYCLE错误在运行vue项目时,突然项目开发环境遇到报错如下: 问题原因: 这常常是因为 node_modules中下载的版本与当前电脑系统 ...
使用vscode运行vue项目
!!学习完vue环境搭建并创建项目后下面我们介绍使用vscode运行vue项目.!! 文章参考:https://www.csdn.net/gather_29/OtTagg3sNzA2LWJsb2cO0 ...
Error: error:0308010C:digital envelope routines::unsupported问题的解决方案包括webstorm运行vue项目的解决方案
原因:主要是nodejs17版本发布了OpenSSL3.0对算法和秘钥大小增加了更为严格的限制,npm升级导致了与OpenSSL不兼容导致的初始化失败,而我的电脑上的node.js是v18.16.0的 ...
记录，再次运行vue项目报错POST http://127.0.0.1:8888/api/private/v1/login/login
可以打开登录界面,却无法打开登录后界面代码没有问题,查阅资料后是后台服务器没打开删除package-lock.json文件运行npm install 再次运行node .\app.js 打开ph ...
win10快速运行vue项目跑起来 - 方法篇
如何让win10更快速跑vue项目运行起来? 不用再每次先cd到项目目录了, 直接进入根文件夹后,再打开Powershell窗口,可以省略一大堆操作 (详情如下简介) 快捷操作如下: 先打开,并进入 ...

Docker环境运行Vue项目