vuePress2.x 多页面 多目录生成方案

前言

因为官网介绍的都只有一个‘一级标题’ 只有一个markdown文件
最终编译后也只有一个html文件,类似于spa 单页项目
如何才有多页项目呢
百度查询 网上插件库有很多,大部分不能用,
后来还是自己想出来的,很简单,办法如下

方案

新建文件 utils>gen-side.js

const fs = require('fs');

fs.readdir('./docs',(err,files)=>{
	if (err) {
		console.log(err);
	} else{
		const sidebar = files.filter(item=>item.indexOf('.md')>-1&&item!=='index.md');
		sidebar.unshift('index.md');
		sidebar.sort((a,b)=>{return a - b});
		const content = `module.exports =${JSON.stringify(sidebar)}`;
		fs.writeFile('./utils/sidebar.js', content, { encoding: 'utf8' }, err => {console.log(err);});
	}
})

或者

const fs = require('fs');

fs.readdir('./docs', (err, files) => {
	if (err) {
		console.log(err);
	} else {
		const sidebar = files.filter(item => item.indexOf('.md') > -1 && item !== 'index.md');
		sidebar.sort((a, b) => { return a - b });
		const sidebarFull = sidebar.map(item => ({
			text: item.substr(0, item.length - 3),
			link: item
		}))
		sidebarFull.unshift({
			text: '简介',
			link: 'index.md'
		});
		const content = `module.exports =${JSON.stringify(sidebarFull)}`;
		fs.writeFile('./utils/sidebar.js', content, { encoding: 'utf8' }, err => { console.log(err); });
	}
})

然后引入使用
[项目名]/docs/.vuepress/config.js

const sidebar = require('../../utils/sidebar');

module.exports = {
  lang: 'zh-CN',
  title: 'Iconify',
  description: 'JavaScript高级程序设计 红宝书',
  base: '/iconify-book/dist/',
  dest: './dist',
  themeConfig: {
    sidebar, //重点这里 引入
    navbar: [
      {
        text: '博客',
        link: 'https://www.cnblogs.com/dshvv',
      },
      {
        text: '语雀',
        link: 'https://www.yuque.com/dingshaohua',
      }
    ]
  }
}

每次新建了一个markdown文件的时候,只需要运行一下 node ./utils/gen-side.js 然后再启动项目即可npm run docs-dev

vuePress2.x 多页面 多目录生成方案