vitepress 环境搭建

搭建node环境

使用docker搭建node环境

services:
  # docker exec -it -w /root node19 env LANG=C.UTF-8 bash
  # docker exec -it -w /root node19 env LANG=C.UTF-8 bash
  # env LANG=C.UTF-8 用来支持命令行中文显示
  node19:
    image: node:19
    container_name: node19
    restart: always
    tty: true
    environment:
      # 监测容器文件变更
      - CHOKIDAR_USEPOLLING=true
      - TZ=Asia/Shanghai
    ports:
      - 5173:5173
    volumes:
      # 工作目录
      - ./work:/root
      - ./.npmrc:/root/.npmrc
      - ./ssh:/root/.ssh # optional
      - ./.gitconfig:/root/.gitconfig # optional

/root 指定工作目录

.npmrc 指定淘宝镜像 registry=https://registry.npmmirror.com/

.ssh 指定私钥和公钥目录

.gitconfig 指定git用户名和邮箱等配置

[user]
    name = username
    email = [email protected]
[init]
    defaultBranch = main

命令步骤

mkdir example && cd example && mkdir work

sudo echo "registry=https://registry.npmmirror.com/" > .npmrc

vim docker-compose.yaml

编辑docker-compose.yaml并保存

docker compose up -d

docker exec -it -w /work node19 env LANG=C.UTF-8 bash

搭建vitepress

当使用docker exec -it -w /work node19 env LANG=C.UTF-8 bash进入node开发环境后，我们创建一个vitepress工作目录mkdir viteblog

npm add -D vitepress

npx vitepress init

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◆  Theme:
│  ● Default Theme (Out of the box, good-looking docs)
│  ○ Default Theme + Customization
│  ○ Custom Theme
└

关于主题，选择○ Default Theme + Customization，其他的默认就行

npm run docs:dev 启动项目

关于 docker 的 node 开发环境

在docker node 中开发vite项目，需要在启动命令中添加 --host 0.0.0.0项，要不然宿主机浏览器访问不了 http://localhost:5173