基于 Docker 构建统一的 Vue 开发环境,运行后组件版本如下
# /app # npm -v
# 10.8.2
# /app # pnpm -v
# 9.14.2
# /app # node -v
# v22.6.0
# /app # yarn -v
# 1.22.22
# /app # vue -V
# @vue/cli 5.0.8
# /app # create-vue --version
# 全局安装 xxx
# npm i -g pnpm | npm i -g vite | npm i -g typescript
# 查看某环境(node npm pnpm yarn nvm, vite 等)
# xxx -v | node -v | npm -v | pnpm -v | pnpm -v | vite -v | yarn -v | tsc -v
# nvm / n node 版本管理工具
Dockerfile 文件
FROM node:22.6-alpine
# timezone
ENV TZ=Asia/Shanghai
# tzdata
RUN set -eux && apk update && apk add tzdata && \
# 设置时区为上海
ln -snf /usr/share/zoneinfo/${TZ} /etc/localtime && \
echo "${TZ}" > /etc/timezone && \
# 清理 APK 缓存和安装包索引
apk cache clean && rm -rf /var/cache/apk/*
# npm
RUN npm install -g [email protected] && npm i -g pnpm
EXPOSE 5173
WORKDIR /app
# source
#COPY . /app
#RUN cd /app && npm install
CMD ["npm", "run", "dev"]
构建镜像
# 构建镜像
docker build -f Dockerfile -t node:22.6-alpine-v20241124 .
# 运行项目
docker run -it --name=yynode --rm -p=8034:5173 -v=$(pwd):/app node:22.6-alpine-v20241124
# 运行 sleep infinity 挂起,初始项目
docker run -it --name=yynode --rm -p=8034:5173 -v=$(pwd):/app node:22.6-alpine-v20241124 sleep infinity
# 运行 npm run dev
docker run -it --name=yynode --rm -p=8034:5173 -v=$(pwd):/app node:22.6-alpine-v20241124 npm run dev
docker exec -it yynode /bin/sh
docker stop yynode
初始项目
npm create [email protected] /app
npm install
npm run dev
npm run build
# http://192.168.0.119:8034/server/
项目配置
1. 二级目录
更改 vite.config.ts
文件,base: ''
改为 base: '/server/'
这样访问地址有 http://192.168.0.119:8034
改为 http://192.168.0.119:8034/server/
2. 端口监听
更改 vite.config.ts
文件,监听主机为 host: '0.0.0.0'
3. 开发环境
根目录增加 .env
区分开发环境和正式环境,配置文件
# .env.development
#.env.production
# 定义环境变量 需要 VITE 开头
VITE_ENV='production'
# 接口地址
VITE_APP_BASE_API='https://tools.196000.xyz'
更改 package.json
构建命令,增加 NODE_ENV=production
环境变量使用 import.meta.env.VITE_XXX
引用
# src/main.ts
if (import.meta.env.VITE_ENV === "development") {
//console.log("当前处于开发环境");
}
if (import.meta.env.VITE_ENV === "production") {
//console.log("当前处于生产环境");
}