docker学习-构建vue开发环境

最新推荐文章于 2024-02-27 09:57:00 发布
最新推荐文章于 2024-02-27 09:57:00 发布
阅读量2.6k 收藏 3
点赞数
分类专栏： 运维 文章标签： docker vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34192032/article/details/103653403
版权
本文通过Dockerfile构建名为myvuecli的镜像，并基于该镜像创建容器，映射8080端口及宿主机目录，用于Vue项目开发。然而，发现宿主机与容器间的文件变更同步存在问题，解决办法是安装docker-windows-volume-watcher监听容器，确保前端代码实时更新。
摘要由CSDN通过智能技术生成

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-cli开发环境

				
			

			

				

					NIJIA72的专栏
				

				

					04-07
					
					1820
					
				

			

		

		

			
				
目标

开发机上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
					
					1783
					
				

			

		

		

			
				
一、导语
二、安装
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

			
		

	



                


  
              

                


	

		

			

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

				
			

			

				

					weixin_31653131的博客
				

				

					01-30
					
					322
					
				

			

		

		

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

			
		

	





	

		

			

				
					
部署vue项目--docker环境

				
			

			

				

					u011146219的博客
				

				

					02-17
					
					334
					
				

			

		

		

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

			
		

	



		

			
		



	

		

			

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

				
			

			

				

					最爱嫣夜来
				

				

					04-08
					
					2097
					
				

			

		

		

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

			
		

	





	

		

			

				
					
docker-laravel-vue-postgres

				
			

			

				

					03-31
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					qq_37312180的博客
				

				

					10-17
					
					1628
					
				

			

		

		

			
				
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设置镜像名称。

			
		

	





	

		

			

				
					
docker-compose部署springboot+vue前后端分离项目 超简单

				
			

			

				

					EEstefan的博客
				

				

					07-31
					
					1034
					
				

			

		

		

			
				
为什么选用docker-compose

Compose 是用于定义和运行多容器 Docker 应用程序的工具。通过 Compose，您可以使用 YML
文件来配置应用程序需要的所有服务。然后，使用一个命令，就可以从 YML 文件配置中创建并启动所有服务。

简单就是说，docker-compose部署是真滴简单，再也不用去求人找脚本了。两个文件加一行命令，快乐不求人！
那我为什么选择docker-compose
因为我是一位垃圾，写shi山的前端，不，是页面开发人员（不配）
所以我只想简单快速地把我的东西

			
		

	





	

		

			

				
					
vue3-环境搭建(docker版本)

				
			

			

				

					小陈的博客
				

				

					01-17
					
					3922
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					前端kk的博客
				

				

					07-25
					
					869
					
				

			

		

		

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

			
		

	





	

		

			

				
					
使用docker构建vue项目并成功运行在本地和线上

				
			

			

				

					
				

				

					12-09
					
					2670
					
				

			

		

		

			
				
windows10 + node + vue + docker都已经安装齐全因为要用这个镜像来构建你的vue项目，就像给vue项目提供一个环境一样。

			
		

	





	

		

			

				
					
Docker部署Vue项目

				
			

			

				

					L_S_G123的博客
				

				

					09-20
					
					674
					
				

			

		

		

			
				
Docker部署Vue项目

			
		

	





	

		

			

				
					
Docker 化 Vue2 应用开发

				
			

			

				

					梅花寺
				

				

					07-31
					
					363
					
				

			

		

		

			
				
Docker在WEB开发中还是可以带来很多的便利和好处，在正式的生产环境也可以使用容器化部署，可以将应用进行隔离。

			
		

	





	

		

			

				
					
docker部署vue

				
			

			

				

					Ang-l
				

				

					07-12
					
					484
					
				

			

		

		

			
				
docker部署vue

			
		

	





	

		

			

				
					
基于docker部署vue项目

				
			

			

				

					bobobo的博客
				

				

					05-23
					
					1742
					
				

			

		

		

			
				
前端项目为vue项目，以往部署方式为npm run build，打成dist，放到nginx中进行转发，由于院里环境限制，目前考虑采用两种方式进行部署。6.基于镜像启动一个容器 docker run -p 3000:3000 -d   --name vueApp test-docker:1.0.0。某院项目，基于阿里bizworks项目中台开发，前后端分离项目，上文提到的后端服务，通过设置注解已经部署到bizworks平台中。一.使用docker容器进行部署vue项目。docker部署前端。

			
		

	





	

		

			

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

					
最新发布

				
			

			

				

					weixin_42907150的博客
				

				

					02-27
					
					7143
					
				

			

		

		

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

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 3

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值