一看就会的保姆级教程，10分钟搭建个人博客，2024年最新web前端开发深圳

（3）dest

该属性表示的是项目打包以后文件生成的目录

例如我们将该 dest 的值改成 ./dist ，那么当我们执行 npm run build 打包文件后，会在当前根目录下生成一个 dist 文件夹，打包好的项目文件都在该文件夹中

（4）head

该属性表示的是 html 文档的 head 标签中需要额外插入的其它标签

默认生成的是：

“head”: [ // 在head标签中生成以下标签

[

“link”, // 生成link标签

{

“rel”: “icon”, // rel属性值为icon

“href”: “/favicon.ico” // href属性值为 /favicon.ico

}

],

[

“meta”, //生成meta标签

{

“name”: “viewport”, // name属性值为viewport

“content”: “width=device-width,initial-scale=1,user-scalable=no” // content属性值为width=device-width,initial-scale=1,user-scalable=no

}

]

]

当然我们也可以继续添加别的标签，例如：

“head”: [ // 在head标签中生成以下标签

[“link”, { “rel”: “icon”, “href”: “/favicon.ico” }],

[“meta”, { “name”: “viewport”, “content”: “width=device-width,initial-scale=1,user-scalable=no” }],

[“meta”, { “name”: “keywords”, “content”: “前端,js,css” }],

[‘meta’, { name: ‘author’, content: ‘零一’ }],

]

（5）theme

该属性表示的是当前项目使用的主题

这里我们是用 vuepress-theme-reco 主题的脚手架生成的，所以它默认就是 reco ，我们可以不用修改，当然后续你想使用别的主题也可以，可以参考一下 vuepress 的官网

（6）themeConfig

该属性表示的是主题的配置信息

这里东西有点多，我们慢慢来讲

1. nav

该属性表示导航栏的配置信息

默认生成的 nav 值如下：

“nav”: [

{ // 第一个导航按钮

“text”: “Home”, // 按钮名称为 Home

“link”: “/”, // 对应的跳转链接为 /

“icon”: “reco-home” // 按钮的前置图标为 reco-home

},

{ // 第二个导航按钮

“text”: “TimeLine”, // 按钮名称为 TimeLine

“link”: “/timeline/”, // 对应的跳转链接为 /timeline/

“icon”: “reco-date” // 按钮的前置图标为 reco-date

},

{ // 第三个导航按钮

“text”: “Docs”, // 按钮名称为 Docs

“icon”: “reco-message”, // 按钮的前置图标为 reco-message

“items”: [ // 该按钮的子菜单

{ // 子菜单中的第一个导航按钮

“text”: “vuepress-reco”,

“link”: “/docs/theme-reco/”

}

]

},

{ // 第四个导航按钮

“text”: “Contact”, // 按钮名称为 Contact

“icon”: “reco-message”, // 按钮的前置图标为 reco-message

“items”: [ // 该按钮的子菜单

{ // 子菜单中的第一个导航按钮

“text”: “GitHub”,