npm run serve 1. 3.将vue项目编译 编译项目得到dist文件夹 npm run build 1. 4.编写Dockerfile文件 直接在src同级目录下,新建名为Dockerfile的文件, 编写Dockerfile文件,Dockerfile文件,具体怎么写,参考Docker Dockerfile | 菜鸟教程,下面是例子 # Docker image for vue application # VERSION 1.0.0 # Author:...
cdmy-vue-appnpmrun build 1. 2. 构建完成后,Vue 项目的静态文件将保存在dist文件夹中。 创建Dockerfile 在项目根目录下创建一个名为Dockerfile的文件,内容如下: # 使用官方 Nginx 镜像FROMnginx:alpine# 将构建的 Vue 项目复制到 Nginx 的公共文件夹COPY./dist /usr/share/nginx/html# 替换默认的 Nginx ...
一、打包vue项目 npm run build 二、docker网上拉取nginx镜像 docker pull nginx 三、vue项目打包文件放到服务器上,创建 dockerfile(参考第八点,将nginx配置文件放置在宿主机,通过dockerfile复制到镜像指定文件) [root@VM-12-13-centos vue]# mkdir dockerHRSass [root@VM-12-13-centos vue]# cd dockerHRSass...
然后进入解压后的文件docker-vue,使用命令ls,查看下面的文件夹。 接下来使用编辑文件命令vi Dockerfile,进去直接按i可以编辑里面的内容。 FROM nginx:latest MAINTAINER xx COPY dist/ /usr/share/nginx/html/ 将上面的内容复制到Dockerfile文件里面,然后按ESC使用:wq这是保存并退出的意思。 第一行是设置的基础镜像...
1.在Vue项目文件下,输入npm run build进行打包,项目下生成dist文件。 2.将dist文件上传到服务器中,在同目录下创建Dockerfile文件。 3.Dockerfile内容: FROM nginx MAINTAINER jam #将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面 COPY dist/ /usr/share/nginx/html/ ...
用vue cli 创建一个vue项目,修改一下创建出来的项目,在页面上写一个前端接口请求,构建一版线上资源 ,基于nginx docker镜像构建成一个前端工程镜像,然后基于这个前端工程镜像,启动一个容器 vuenginxcontainer。 启动一个基于 node 镜像的容器 nodewebserver,提供后端接口。
1、vue_index/Dockerfile # 设置基础镜像FROMnginx# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面COPYdist//usr/share/nginx/html/#用本地的 default.conf 配置来替换nginx镜像里的默认配置COPYnginx/default.conf/etc/nginx/conf.d/default.conf ...
在Dockerfile中部署Nginx和Vue应用,通常涉及以下几个步骤。以下是一个详细的指南,包括Dockerfile的编写、Nginx配置的设置、Docker镜像的构建、容器的运行以及测试步骤。 1. 编写Dockerfile以构建包含Nginx和Vue应用的镜像 首先,我们需要在Dockerfile中定义基础镜像、复制Vue应用的构建产物、安装Nginx并配置它。 Dockerfile ...
这里就不讲述Vue的安装和编写了 第一步打包项目: 把Vue项目打包: npm run build 你会看到一个dist文件夹,只需要将这个dist文件夹放到远程服务器上 第二步新建nginx.conf文件: listen 80; location / { root /usr/share/nginx/html; index index.html; ...
如我的目录是:/root/jiangyu/projects/gentle_vue/gentle_vue_code 。 3. 项目打包: 代码语言:javascript 复制 npm run build 会自动生成 dist 文件夹 。 4. 在任意目录下新建文件 dockerfile 。内容如下: 代码语言:javascript 复制 # 设置基础镜像FROMnginx ...