前端将vue打包成镜像发布

最新推荐文章于 2025-12-24 16:14:34 发布

原创

最新推荐文章于 2025-12-24 16:14:34 发布 · 2.7k 阅读

标签

#linux #docker

收录于

该博客主要围绕Linux下Docker打包展开。先进行总体预览，接着介绍打包配置，包括default.conf、Dockerfile，以及打包步骤，最后提及问题思考，并给出出现错误时可参考的链接。

文章目录

一、总体预览
二、打包配置
三、问题思考

提示：以下是本篇文章正文内容，下面案例可供参考

一、总体预览

在这里插入图片描述

二、打包配置

2.1 default.conf

server {
   
   
    listen       80;
    server_name  localhost;

    location / {
   
   
        root   /usr/share/nginx/html/;
        index  index.html index.htm;
        # try_files $uri $uri/ /index.html;
    }
    location /finalLearn {

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Bestest~

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Docker打包vue项目镜像（生产环境）

qq_37312180的博客

10-14

1580

通过xsell连接centos服务器，进入刚上传的文件夹，执行打包docker镜像的命令构建镜像。把vue项目打包后的dist文件夹拷贝到该文件夹目录下。在该文件夹目录下，在建一个Dockerfile文件。使用xftp把改文件夹上传至centos服务器。浏览器访问测试：http://IP:8089。生成(启动)一个容器。

参与评论您还未登录，请先登录后发表或查看评论

【Docker】Vue项目基于Nginx打包成镜像并生成容器

喜欢分享些自己折腾的技术笔记

08-30

4915

确保docker环境正常运行，不论是远程的还是本地的确保vue项目能正常运行将vue项目编译编写Dockerfile文件使用docker build命令生成镜像使用docker run命令生成容器

vue-Docker镜像打包

热门推荐

stormjun的博客

06-10

2万+

本文介绍了Vue中如何进行打包与部署，包括使用Webpack进行打包、使用Nginx进行部署和使用Docker进行容器化部署。这些方法都是常用的Vue应用程序的打包和部署方法，可以根据实际需要选择合适的方法进行部署。

vue项目部署和镜像打包

m0_46393656的博客

03-09

1971

需要注意的是，这种代理配置只适用于开发环境，当你打包部署到生产环境时，前端代码会被编译为静态资源文件，无需再配置代理。在生产环境中，你需要确保前端静态资源文件与后端项目部署在同一个域名下或通过其他方式进行跨域配置。在 Vue 前端项目中配置后端项目的访问地址可以通过修改项目的配置文件来实现。在 vue.config.js 中，可以使用 devServer 字段来配置开发服务器的代理。通过以上配置，当你在 Vue 项目中发起以 /api 开头的请求时，开发服务器会将请求代理到后端地址。替换为实际的后端地址。

Vue项目如何打包成Docker镜像包

Confused_的博客

05-10

3653

参数指定要绑定的主机端口和容器端口。在这个例子中，将主机端口 8080 绑定到容器端口 80。中定义应用程序所需的环境，例如 Node.js 运行时和依赖项。在 Vue 项目根目录下创建一个名为。是你要为镜像取的名称。

前端镜像部署和启动

weixin_44876263的博客

03-04

1723

采用 docker 前端部署和启动1、修改前端容器映射端口：UI_PORT=9999（自定义），后端容器映射端口API_PORT =9009（自定义），同时修改前端nginx.conf中后端接口转发的端口号例如：将API_PORT 设置为 9010，再将nginx.conf中的proxy_pass修改为：proxy_pass http://host.docker.internal:9010/api/report/v1;

使用docker部署nginx&&发布Vue前端

qq_37107017的博客

02-17

2055

使用docker部署nginx&&发布Vue前端

将vue项目使用electron-egg打包成桌面程序

weixin_43822237的博客

04-19

3273

使用electron-egg打包成桌面程序.exe格式的，electron-egg打包框架一直在进行维护，electron-vue现在不建议使用了，因为已经不维护了，使用这个打包会出现很多毛病，本人就是受害者呀，使用electron-vue打包后iframe、embed、webview都不兼容还有其他一些就不一一举例说明；第一步：先将vue项目执行指令打包成dist 文件夹 npm run build 第二步：新建一个文件夹使用git指令下载electron-egg框架 # gitee .

vue前端使用Docker部署

fly_duck的博客

06-14

3313

使用docker发布vue前端项目

如何正确快速的将你的前端应用打包成Docker镜像并发布

SH的全栈笔记

12-01

3227

1.前言前段时间，自己搞了个阿里云的服务器。想自己在上面折腾，但是不想因为自己瞎折腾而污染了现有的环境。毕竟，现在的阿里云已经没有免费的快照服务了。要想还原的话，最简单的办法就是重新装系统。而一旦重装，之前的搭建的所有环境就都白搭了。再加上之前本身就想引入docker，所以就打算利用docker容器来部署这次的前端应用。 2.构建前端应用在打包之前，首先需要一个可正常运行的前端应用。这个可以使用umi或者create-react-app来构建。 3.nginx的默认配置文件然后需要在项目中加上默认n

vue打包docker镜像并推送阿里云简单步骤

CN_wangsanhua的博客

08-23

491

1、安装docker https://www.docker.com/products/docker-desktop/7、Docker login 与镜像仓库建立连接。2、设置setting 阿里云加速。3、编写dockerFIle。8、打包镜像docker。6、阿里云创建镜像仓库。4、项目下进入cmd。

Vue项目打包成docker镜像部署

胥平勇的博客

10-18

5195

我们部署Vue项目，可以build之后，直接放到nginx下面即可，今天给大家介绍创建docker镜像，使用docker镜像启动容器运行部署Vue项目的方式，可以尝试尝试，原理和使用nginx部署一样，不过是使用的docker容器而已，内部还是使用的是nginx作为基础镜像。以上步骤即可帮助我们使用docker容器部署Vue项目，原理其实和我们使用nginx部署Vue是一样的，我们打包自己的镜像使用的基础镜像也是nginx，感兴趣的小伙伴可以自己动手尝试尝试。

前端vue项目打镜像并拉取镜像包

qq_44981598的博客

07-15

548

前端vue项目打镜像并拉取镜像包

将前端包打成镜像

Hewei066的博客

08-10

910

3.配置代理，代理地址和端口号可以再电脑上查询（连接VPN后而且关闭了防火墙），我这边代理地址的标点符合输成中文的了，应该是英文的。1.通过版本控制工具拉取到前端代码，运行、打包并配置有dokerfile文件。5.然后再前端开发工具中先拉去基础镜像（我这边是nginx:1.22.0）4.启动docker服务后，可以看是否能拉取镜像（随便找一个镜像拉取）2.下载安装docker,使用默认的镜像源即可。6.然后通过构建命令，构建前端镜像包。

docker 构建jar包/vue镜像以及发布

yxt625520的博客

10-19

635

docker 构建jar包/vue镜像以及发布

将前端vue项目打包，并生成docker镜像文件，并运行

weixin_42630616的博客

05-27

2712

最近做时速云项目部署，需要将前端项目打成镜像文件，但是又不想装linux，所以找了半天，打包好了，特此记录

vue前端打包Docker镜像并nginx运行

xiaogg3678的专栏

01-03

1533

vue前端打包Docker镜像并nginx运行，cpoy目录到到容器中

vue打包后用docker镜像部署

deng_zhihao692817的专栏

03-11

1758

其实仔细想想也对，因为vue项目打包成dist后，在该项目下新建Dockerfile文件，而我是把dist文件夹单拿出来了，在dist文件夹里面新建Dockerfile文件是不对的。比如我打包好的dist文件夹，要和Dockorfile在同一级目录下，不然在build构建时是找不到dist文件夹的。写好之后，就把admin文件夹，上传到阿里云服务器，我是用Xshell和Xftp7连上服务器的。vue3项目打包成dist后，用Dockerfile，镜像部署。查看镜像，看到创建的镜像已经成功。

Windows docker vue打成镜像运行部署（前端）

CXY_BOY的博客

11-19

1662

docker 构建jvue包为镜像运行