vue项目打包,打包后的dist包里的所有文件上传后,放到刚刚创建的nginx下面的html目录中 放好后,由于nginx容器我们刚刚已经启动ok了 ,直接访问IP:Port完全可以访问到我们的vue项目 但需要继续配置下Nginx文件反向代理 12. 修改nginx的default.conf配置文件 可以直接在sftp上传文件这块修改,也可以用命令行修改 命令行如: ...
1.使用docker查询nginx的镜像 使用命令:docker search nginx 2.下载nginx镜像 使用命令:docker pull nginx 3.创建挂载目录 在/home/wms下创建/nginx 通过命令:mkdir nginx 创建目录 4.运行并且挂载nginx (可不看第7步以后的优化) 通过docker images 查看docker的镜像 docker run -d -p 80:80 --name nginx_wms...
一、打包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...
用vue cli 创建一个vue项目,修改一下创建出来的项目,在页面上写一个前端接口请求,构建一版线上资源 ,基于nginx docker镜像构建成一个前端工程镜像,然后基于这个前端工程镜像,启动一个容器 vuenginxcontainer。 启动一个基于 node 镜像的容器 nodewebserver,提供后端接口。 修改vuenginxcontainer 的 nginx 配置,使前端...
一、vue项目编译打包 1、更新node更新库 2、编译打包 npm run build 该问题的原因是 之前项目代码是在windows环境编译的 现在是在mac环境编译 所以需要下载相应操作系统的编译库 编译成功之后 会生成一个dist文件夹 里面的内容就是即将部署到nginx的静态资源 ...
docker cp nginx:/etc/nginx/nginx.conf /home/nginx/conf/nginx.conf # 将容器nginx.conf文件复制到宿主机docker cp nginx:/etc/nginx/conf.d /home/nginx/conf/conf.d # 将容器conf.d文件夹下内容复制到宿主机docker cp nginx:/usr/share/nginx/html /home/nginx/ # 将容器中的html文件夹复制到宿主机...
youlai-mall-admin是开源项目有来商城分离的管理前端,基于vue-element-admin基础框架构建的。这里讲述如何将其部署到线上环境。 1. 项目打包 执行npm run build:prod打包项目,打包生成的文件在项目根目录下的dist文件夹。 2. 项目上传 使用FTP工具上传dist文件夹下的所有文件至服务器/usr/share/nginx/html目录下 ...
一、vue项目编译打包 1、更新node更新库 2、编译打包 npm run build 该问题的原因是 之前项目代码是在windows环境编译的 现在是在mac环境编译 所以需要下载相应操作系统的编译库 编译成功之后 会生成一个dist文件夹 里面的内容就是即将部署到nginx的静态资源 ...
docker save -o nginx.tarnginx:1.14 # 导入镜像,nginx.tar就是刚才导出的包 docker load -i nginx.tar 在当前目录新建nginx配置文件nginx.conf(注:nginx代理目录就是刚才在Dockerfile文件中配置的虚拟目录/usr/local/nginx/html/) worker_processes auto; ...
使用Docker和Nginx部署Vue项目是一个常见的做法,可以确保你的Vue应用能够在任何支持Docker的环境中一致地运行。以下是详细的步骤,包括必要的代码片段: 1. 构建Vue项目并生成dist目录 首先,你需要在本地环境中构建你的Vue项目。这通常通过运行以下命令完成: bash npm run build 构建完成后,Vue CLI会在你的项目根目...