vuepress构建文档

创建项目

“vuepress”: “^1.9.8”
参见：https://www.vuepress.cn/guide/getting-started.html
docs/index.md 文件名对应 package.json 里配置的 main

多语言

应该是使用了.vuepress配置的原因，docs里索引文件用的是README.md也可以，package.json仍旧可以是"main": "index.js"

docs目录结构

│  README.md
│
├─.vuepress
│  │  config.js
│  │
│  ├─public
│  │  └─img
│  │          banner.jpg
│  │          logo.jpg
│  │
│  └─styles
│          index.styl
│          palette.styl
│
├─en-US
│  │  README.md
│  │
│  └─FAQ
│          faq1.md
│
└─zh-CN
    │  README.md
    │
    └─FAQ
            faq1.md

新建文件夹

在docs目录下新建

1. 语言文件夹（例如：zh-CN，en-US）
2. 配置文件夹.vuepress

语言文件夹（zh-CN为例）

新建README.md作为默认文件，其他文件随意。

配置多语言

在.vuepress下新建config.js文件

module.exports = {
	locales: {
		"/": {
			lang: "en-US",
			title: "FAQ",
			description: "FAQ1",
		},
		"/zh-CN/": {
			lang: "简体中文",
			title: "FAQ",
			description: "FAQ1",
		}
	},
	base: '/docs/',
	themeConfig: {
		locales: {
			'/': {
				selectText: 'Languages',
				label: 'English',
				editLinkText: 'Edit this page on GitHub',
				serviceWorker: {
					updatePopup: {
						message: "New content is available.",
						buttonText: "Refresh"
					}
				},
				sidebar: [
					{
						title: 'Backup & Recovery',
						path: '/en-US/FAQ/faq1.html',
						children: [
							['/en-US/FAQ/faq1.html', 'faq123']
						]
					}
				]
			},
			'/zh-CN/': {
				// 多语言下拉菜单的标题
				selectText: '选择语言',
				// 该语言在下拉菜单中的标签
				label: '简体中文',
				// 编辑链接文字
				editLinkText: '在 GitHub 上编辑此页',
				// Service Worker 的配置
				serviceWorker: {
					updatePopup: {
						message: "发现新内容可用.",
						buttonText: "刷新"
					}
				},
				sidebar: [
					{
						title: '备份&恢复',
						path: '/zh-CN/FAQ/faq1.html',
						children: [
							['/zh-CN/FAQ/faq1.html', '备份']
						]
					}
				]
			}
		}
	}
}

配置根路径

一定要以 / 结尾

module.exports = {
	base: '/docs/'
}

tab页icon

module.exports = {
	head: [
		['link', { rel: 'icon', href: './img/logo.jpg' }] // tab页icon
	],
}

导航栏logo

module.exports = {
	themeConfig: {
		logo: './img/logo.jpg', // 导航栏logo
	}
}

静态资源文件

静态资源放在docs/.vuepress/public目录下

![bannerEn](./.vuepress/public/img/banner.jpg)

嵌套的标题链接

module.exports = {
	themeConfig: {
		sidebarDepth: 0 // 默认是1
	}
}

导航栏链接

module.exports = {
	themeConfig: {
		nav: [
			{ text: 'github', link: 'https://gitee.com/skyeblack/vuepress-note' }
		],
	}
}

侧边栏

module.exports = {	
	themeConfig: {		
		locales: {
			'/': {				
				sidebar: [
					{
						title: 'Backup & Recovery',
						path: '/en-US/FAQ/faq1.html',
						children: [
							['/en-US/FAQ/faq1.html', 'faq123']
						]
					}
				]
			}			
		}
	}
}