docker学习-构建vue开发环境

使用Docker搭建Vue开发环境
最新推荐文章于 2025-10-19 12:34:54 发布
原创 最新推荐文章于 2025-10-19 12:34:54 发布 · 2.7k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#docker #vue

本文通过Dockerfile构建名为myvuecli的镜像，并基于该镜像创建容器，映射8080端口及宿主机目录，用于Vue项目开发。然而，发现宿主机与容器间的文件变更同步存在问题，解决办法是安装docker-windows-volume-watcher监听容器，确保前端代码实时更新。

dockerfile文件如下

## 选node作为基础镜像
FROM node:latest
##换源安装vuecli
RUN \
npm config set registry https://registry.npm.taobao.org \
&& npm install -g @vue/cli
## 创建一个目录
RUN mkdir /data
## 指定工作目录
WORKDIR /data

根据dockerfile build 镜像文件 为myvuecli


                

                
                
        

    

  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
Docker打包vue项目镜像（开发环境）

				
			

			

				

					qq_37312180的博客
				

				

					10-17
					
					1874
					
				

			

		

		

			
				
docker run -d -p 3006:80 vue_npm_arcgis_image2    #启动（运行）容器。docker build . -t vue_npm_arcgis_image2     #打包成docker镜像。运行npm run docker打包docker镜像并启动（运行）容器。vue_npm_arcgis_image2  镜像名称。浏览器访问http://IP:Port测试。-t  title设置镜像名称。

			
		

	



                

            
              



	

		

			

				
					
(2024)docker-compose实战 (9)部署多项目环境(LAMP+react+vue+redis+mysql+nginx)

				
			

			

				

					老刘Pro，PHPer
				

				

					07-10
					
					823
					
				

			

		

		

			
				
如果需要修改运行内存, 上传设置, 超时时间等, 则需要补充/web/laoliu_pro/conf/php.ini文件. 若只是使用默认设置, 则可以在docker-compose.yaml中去掉php.ini的映射.文件路径: /web/laoliu_pro/conf/000-default.conf。文件路径: /web/laoliu_pro/conf/default.conf。文件路径: /web/laoliu_pro/conf/php.ini。

			
		

	



              


  
              

                


	

		

			

				
					
docker 搭建vue-cli开发环境

				
			

			

				

					NIJIA72的专栏
				

				

					04-07
					
					1957
					
				

			

		

		

			
				
目标

开发机上0环境，全都由容器实现

开始

1）创建一个项目目录

2）编写一个 Dockerfile文件（区分大小写），创建一个开发环境镜像

Dockerfile


FROM node:10.19.0-stretch-slim

# system local config
RUN true \
    # debian china mirrors
    && se...

			
		

	





	

		

			

				
					
基于docker的Vue项目开发

				
			

			

				

					qq_33177268的博客
				

				

					01-06
					
					1948
					
				

			

		

		

			
				
一、导语
二、安装
2.1 安装docker
2.2 安装node.js
指定node版本和映射端口
docker run -itd --name node_pigx -p 8080:8080 node:14

也可以不指定，不映射
docker run -itd --name node_pigx node

2.3 安装VScode
2.4 安装插件：Docker、Remote - Containers
（Microsoft开发的所有Remote开头的插件都值得安装）
之后就可以“远程”开发运行在dock

			
		

	



		

			
		



	

		

			

				
					
Docker入门：如何用容器快速搭建开发环境

					
最新发布

				
			

			

				

					Made In SQL
				

				

					10-19
					
					766
					
				

			

		

		

			
				
Docker是一个开源的容器化平台，它允许开发者将应用程序及其依赖打包到一个轻量级、可移植的容器中。与虚拟机不同，Docker容器共享主机操作系统内核，因此更加轻量高效。Docker容器可以在任何支持Docker的环境中运行，包括开发者的笔记本电脑、数据中心服务器或云平台，确保了应用在不同环境中的一致性。

			
		

	





	

		

			

				
					
linux系统下docker搭建vue前端项目开发运行环境详解

				
			

			

				

					最爱嫣夜来
				

				

					04-08
					
					2435
					
				

			

		

		

			
				
1、 初衷
最近做了几个前后端项目，在前后端项目链条的时候，发现在windows系统下安装前端发过来的vue项目的依赖的时候各种报错， npm install一直无法安装，但是我在linux系统下面安装了nodejs环境之后，执行npm install 很快成功了，于是我就把项目的开发环境转移到linux开发服务器下面去了，突然起了一个想法就是能不能使用docker来配置开发环境， 每一个项目都单独整一个开发运行环境来跑，抱着试试看的心态做了一下尝试， 发现成功了，现在把具体的操作进行一下记录，分享给同样爱

			
		

	





	

		

			

				
					
vue项目docker docker-compose 本地开发环境配置

				
			

			

				

					前端kk的博客
				

				

					07-25
					
					1224
					
				

			

		

		

			
				
配置Docker Compose用于在本地开发Vue项目是一个方便且高效的方法。Docker Compose允许您定义和管理多个容器组成的应用程序。

			
		

	





	

		

			

				
					
部署vue项目--docker环境

				
			

			

				

					u011146219的博客
				

				

					02-17
					
					422
					
				

			

		

		

			
				
docker 中部署东西很多，前端vue部署很麻烦在这里记录下

			
		

	





	

		

			

				
					
[手把手系列之]Docker 部署 vue 项目

					
热门推荐

				
			

			

				

					weixin_42907150的博客
				

				

					02-27
					
					1万+
					
				

			

		

		

			
				
Docker 作为轻量级虚拟化技术，拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。本文使用Docker来部署一个vue的前端应用，并尽可能详尽的介绍了实现思路和具体步骤，以方便有类似需要的同学参考。Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，该容器包含了应用程序的代码、运行环境、依赖库、配置文件等必需的资源，通过容器就可以实现方便快速并且与平台解耦的自动化部署方式，无论你部署时的环境如何，容器中的应用程序都会运行在同一种环境下。

			
		

	





	

		

			

				
					
docker-laravel-vue-postgres

				
			

			

				

					03-31
				

			

		

		

			
				
【标题】"docker-laravel-vue-postgres" 是一个基于Docker技术构建的开发环境，它整合了PHP、Laravel框架、Vue.js前端框架以及PostgreSQL数据库，为开发者提供了一个高效且可移植的开发和部署解决方案。  【描述】这...

			
		

	





	

		

			

				
					
docker 搭建 vue3 + vite

				
			

			

				

					pingguocu3的博客
				

				

					10-09
					
					1306
					
				

			

		

		

			
				
1. docker部署应用, 最优解还是用 docker run 命令直接进入容器，然后跟着文档一步步操作，直至代码可运行，2. docker compose 可以和开发工具绑定，一键启动。3. 尝试过使用.sh 用docker compose 直接部署，结果不令人满意。4. 遇到，权限问题 通过 sudo chmod -R 777 my-vue3 解决最后编辑于：2024-09-27 20:39:12©禁止转载,著作权归作者所有,转载或内容合作请联系作者。

			
		

	





	

		

			

				
					
详解用Docker搭建Laravel和Vue项目的开发环境

				
			

			

				

					09-30
				

			

		

		

			
				
主要介绍了详解用Docker搭建Laravel和Vue项目的开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
Dockerfile构建Vue开发环境

				
			

			

				

					CHWB2580的博客
				

				

					05-27
					
					757
					
				

			

		

		

			
				
【代码】Dockerfile构建Vue开发环境。

			
		

	





	

		

			

				
					
windows 系统下的docker  外置vue开发环境

				
			

			

				

					程序笔记的博客
				

				

					05-08
					
					1178
					
				

			

		

		

			
				
安装环境

DockerToolbox-18.03.0-ce

node-8.9.3

外置需要文件交换


注意编译器没有开发环境，仅仅是一个代码提示工具


1.使用FTP进行文件交换

2.使用共享文件夹进行交换

3.使用samba服务器进行交换

我自己使用的共享文件夹交换

步骤1


docker pullnode-8.9.3

步骤2

运行node环境


docker run...

			
		

	





	

		

			

				
					
基于Vue.js的新冠疫情自我检测系统网页设计与开发

				
			

			

				

					This blog is a space to document my professional learnings, personal reflections, and everything in between.
				

				

					09-25
					
					1342
					
				

			

		

		

			
				
Sylvan Ding 的第一个基于 Vue.js 的项目. 本项目所提供的信息，只供参考之用，不保证信息的准确性、有效性、及时性和完整性，更多内容请查看国家卫健委网站！

			
		

	





	

		

			

				
					
vue 开发 docker_大前端开发环境准备

				
			

			

				

					weixin_31653131的博客
				

				

					01-30
					
					365
					
				

			

		

		

			
				
红豆生南国，春来发几枝？愿君多采撷，此物最相思。相思纤云弄巧，飞星传恨，银汉迢迢暗渡。金风玉露一相逢，便胜却人间无数。柔情似水，佳期如梦，忍顾鹊桥归路。开发环境准备本地环境配置需要：Node.js，IDE，Vue-CLi，Linux 虚拟机自建环境，购买服务，安装Docker具体介绍：Node.js(npm/yarn) + nvm(node.js版本管理)IDE(Webstorm/Vsc...

			
		

	





	

		

			

				
					
vue3-环境搭建(docker版本)

				
			

			

				

					小陈的博客
				

				

					01-17
					
					5054
					
				

			

		

		

			
				
对于开发来说，万事环境难，环境搭完了，后边可以跟着文档系统学习了。预计还会输出几篇vue3的文章，但肯定不是无脑的搬运文档。初步计划把印象深刻，与vue2差异大的一些内容整理一下进行输出。整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了。

			
		

	





	

		

			

				
					
利用dockerfile构建vue和element-ui开发环境容器

				
			

			

				

					qq_38120778的博客
				

				

					04-26
					
					711
					
				

			

		

		

			
				
1.创建Dockerfile
在一个目录之下创建Dockerfile
FROM node

# system local config
RUN true \
    # debian china mirrors
    && sed -i 's/deb.debian.org/mirrors.ustc.edu.cn/g' /etc/apt/sources.list \
    && sed -i 's/security.debian.org/mirrors.ustc.edu.c

			
		

	





	

		

			

				
					
【Docker】Docker快速部署SpringBoot+Vue项目

				
			

			

				

					m0_51634403的博客
				

				

					09-10
					
					2346
					
				

			

		

		

			
				
1、项目部署规划
2、准备工作
3、Docker安装
4、拉取镜像
5、Dockerfile构建个人镜像
6、Docker-compose容器编排
7、配置容器环境
8、项目测试
9、将镜像发布到阿里云镜像仓库

			
		

	





	

		

			

				
					
Docker搭建Laravel与Vue开发环境详解：无痛部署教程

				
			

			

				

					
				

			

		

		

			
				
 - **Vue开发环境**：如果项目采用前后端分离，可能需要在前端容器中配置Node.js和相关前端开发工具，如Webpack和Babel。  5. **启动和管理服务**：使用`docker-compose up`命令来启动所有预定义的服务，它们将在...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 3

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值