初始化一个 vue 相关项目

• 这里我们以 vuepress 项目为例

# 创建项目文件夹并进入
mkdir docker-vue && cd docker-vue

# 使用 yarn 或 npm 初始化
yarn init # npm init

# 将 VuePress 安装为本地依赖
yarn add -D vuepress # npm install -D vuepress

# 创建你的第一篇文档
mkdir docs && echo '# Hello VuePress' > docs/README.md

# 在 package.json 中添加一些 scripts
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

• 目录结构

.
├── docs
│   ├── .vuepress (可选的)
│   │   └── config.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

• 为了方便编译部署，这里我们把编译的输出目录设置为项目根目录下

默认为 .vurepress/dist，参考 官方说明 (opens new window)

module.exports = {
    dest: './dist'
}

• 测试运行和编译

# 运行
npm run docs:dev # vuepress dev docs

# 编译
npm run docs:build # vuepress build docs

部署 Nginx

我们只需要把 Nginx 的文件目录指向编译后的产物，也就是 dist 文件夹即可；假设我们的 dist 文件夹路径为 /home/vue/dist；

• 通过 Docker 部署

docker run --name nginx-vue -v /home/vue/dist:/usr/share/nginx/html -p 80:80 nginx:1.20

• 通过 Docker Compose部署

version: "3"
services:
  nginx:
    image: nginx:1.20
    container_name: nginx-vue
    volumes:
      - /etc/localtime:/etc/localtime:ro
      - /home/vue/dist:/usr/share/nginx/html
    ports:
      - "80:80"