docker 搭建 vue3 + vite

vue3发布了,今天就分享一下我使用docker 搭建 vue3 + vite 开发环境。至于为什么使用docker搭建,因为多版本可以快速切换,和本地环境避免冲突。好了话不多说我们开始吧。

1. 准备资料

Docker Desktop + wsl2 + ubuntu

下载地址 : https://www.docker.com/products/docker-desktop

2. 编写docker node镜像运行代码

新建一个 install-node.sh 文件如下, 其中 ~/www/vue3 是本机地址, /home/node/app 是镜像内部运行地址, 镜像node 版本 16.3.0 , --name node16 给容器命名 node16

install-node.sh

#!/bin/bash

docker run -it --rm --name node16 - v ~/www/vue3:/home/node/app node:16.3.0

运行结果

3. 运行镜像 安装 vue3 + vite

sh install-node.sh

打开 Docker Desktop 点击箭头打开进入node 容器

进入node容器

依次执行 ,把 <project-name> 替换成项目名称

cd /home/node/app

npm config set registry https://registry.npm.taobao.org/

npm init @vitejs/app <project-name>

cd <project-name>

npm install

npm run dev

例如 :


这里选择 vue


继续选择vue安装完成

安装完成

cd my-vue3

安装成功了

运行 npm install 安装vue3的依赖

运行 npm run dev 启动

启动完成得到如下目录

这就是vue3的项目目录了

4. 编写docker-compose.yml

在my-vue3外层目录创建 docker-compose.yml 文件

vue3/docker-compose.yml

version: "2"

services:

node:

image: "node:12.0.0"

user: "root"

working_dir: /home/node/app

environment:

  • NODE_ENV=development

volumes:

  • ./my-vue3:/home/node/app

ports:

  • "3000:3000"

command: "npm run dev"

完成之后 执行 docker-compose up -d 启动服务

修改 vite.config.js 监听 地址 host:'0.0.0.0'

然后访问 http://localhost:3000/

成功进入 尝试热重载完美运行,保存后自动更新

5. 总结
  1. docker部署应用, 最优解还是用 docker run 命令直接进入容器,然后跟着文档一步步操作,直至代码可运行,

  2. docker compose 可以和开发工具绑定,一键启动。

  3. 尝试过使用.sh 用docker compose 直接部署,结果不令人满意。

  4. 遇到,权限问题 通过 sudo chmod -R 777 my-vue3 解决


最后编辑于:2024-09-27 20:39:12
© 禁止转载, 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦!!!

相关推荐
漫漫不慢.11 分钟前
算法练习-二分查找
java·开发语言·算法
还是鼠鼠19 分钟前
《黑马商城》Elasticsearch基础-详细介绍【简单易懂注释版】
java·spring boot·spring·elasticsearch·搜索引擎·spring cloud·全文检索
牧羊人_myr34 分钟前
Maven核心功能与项目构建详解
java·maven
华仔啊1 小时前
千万级大表如何新增字段?别再直接 ALTER 了
后端·mysql
Maple_land1 小时前
Linux进程第八讲——进程状态全景解析(二):从阻塞到消亡的完整生命周期
linux·运维·服务器·c++·centos
爱吃生蚝的于勒1 小时前
【Linux】零基础学会Linux之权限
linux·运维·服务器·数据结构·git·算法·github
量子物理学1 小时前
Eclipse Mosquitto 在小内存下怎么修改配置文件
java·服务器·eclipse
程序员鱼皮1 小时前
让老弟做个数据同步,结果踩了 7 个大坑!
java·后端·计算机·程序员·编程·职场
Cyan_RA91 小时前
Linux 远程Ubuntu服务器本地部署大模型 EmoLLM 中常见的问题及解决方案 万字详解
linux·运维·服务器·ubuntu·大模型·远程部署·emollm
麦兜*1 小时前
Redis 7.2 新特性实战:Client-Side Caching(客户端缓存)如何大幅降低延迟?
数据库·spring boot·redis·spring·spring cloud·缓存·tomcat