基于 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("当前处于生产环境");
}