4、将本地的vue项目进行打包,生成dist目录 npm runbuild# 执行该指令后,在项目根目录中生成dist文件夹 5、将dist文件夹压缩并上传到挂载目录中:/usr/local/nginx/ 6、进入挂载目录,并解压出dist目录,我们的index.html则在dist目录下: 7、在与dist同目录下,创建Dockerfile文件,vim Dockerfile: FROMnginxCOPY./d...
要在Docker中部署Vue项目,主要分为以下几个步骤:1、准备Vue项目,2、创建Dockerfile,3、构建Docker镜像,4、运行Docker容器。这些步骤将帮助你将Vue应用程序打包成一个Docker镜像,并在Docker容器中运行。 一、准备Vue项目 确保你已经有一个Vue项目。如果你还没有,可以使用Vue CLI创建一个新的Vue项目: vue create my...
这样一来,当运行npm run serve的时候,就会运行.env和.env.development文件,process.env.VUE_APP_baseUrl就会被赋值为"http://localhost:8080/dcxt/shop/",(这里有个坑,就是这几个baseurl必须用双引号,不能用单引号,不然部署到测试环境的时候会直接把这个当字符拼接在当前路劲之后。) 而当运行npm run test 就...
请注意,上面的Dockerfile假设你已经通过npm run build命令生成了dist文件夹。如果你的Vue项目有不同的输出目录,请相应地修改COPY指令的路径。 3. 构建Docker镜像 在Vue项目的根目录下打开终端,并运行以下命令来构建Docker镜像: bash docker build -t vue-app . 这里,-t vue-app指定了镜像的名称为vue-app,.表...
部署流程 下面是 Docker 部署 Vue 项目的流程表: 详细步骤 1. 安装 Docker 首先,你需要确保你的计算机上已经安装了 Docker。请前往 [Docker 官方网站]( 下载并安装适合你操作系统的 Docker 版本。 2. 创建 Vue 项目 使用Vue CLI 创建一个新的 Vue 项目。在终端中运行下面的命令: ...
# 使用vue2创建应用vue init webpack"vue-docker"# 初始化依赖包npm install# 运行npm run dev# 打包npm run build 构建vue应用镜像并启动容器 vue项目部署需要使用到服务器容器,本文采用的是nginx反向代理来部署,nginx是一个高性能的HTTP和反向代理服务器,我们选用 nginx 镜像作为基础来构建我们的vue应用镜像。
Docker是一个虚拟环境容器,可以将开发环境、代码、配置文件等一并打包到这个容器中,最后发布应用 使用docker 通过将部署的操作集中成一个部署脚本完成传统的部署流程,通过在服务器上运行docker容器来运行前端应用 部署环境 vue cli --version 3.3.0 CentOSLinuxrelease 7.7.1908 ...
在使用docker-compose之前先执行该命令开启docker服务:sudo systemctl start docker * docker-compose.yml version:"3" services:#指定服务名称 web-service: container_name:front-lib-web#指定容器名称 ports: -"6888:6888"# 左侧为docker暴露端口 右侧为nginx端口(服务器端口) ...
一、前端部署 1.宿主机创建目录,用于存放build之后的前端文件,以及nginx配置文件。 2.在conf目录下,创建配置nginx.conf文件。 3.拉取镜像 4.创建容器,并设置挂接数据卷 5.访问宿主机ip,则可以访问网页。 6.附录,docker常用命令 二、后端部署 1.在宿主机文件夹下,把代码、配置文件整理到同一目录下。 2.编写启...
vue项目部署到docker中 前言 最近做完了一个项目,Vue.js 2.0 + vuex + axios,还是有点大的。想着做了这么久,放服务器给朋友们体验一下,帮忙找找BUG,于是就有了研究服务器这一篇文章了。 准备工作 服务器 既然是部署到服务器,肯定是需要一个云的。我这里找基友拿的一个,做测试的话,可以买阿里云的学生机,...