Vuepress侧边栏使用以及样式错误问题、如何打包

不念不忘少年蓝@ 2022-11-14 11:50 269阅读 0赞

### 使用 vuepress 快速搭建文档 ###

*  搭建
 *  侧边栏使用
 *  项目部署出现样式丢失，图片加载失败的问题
 *  打包
 *  已有vuepress项目运行

# 搭建 #

*  [官方搭建文档][Link 1]

# 侧边栏使用 #

*  [官方文档侧边栏使用][Link 2]
 *  想为不同的页面组来显示不同的侧边栏，如图所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center 1]
 *  需要在config.js中配置侧边栏导航，目录结构如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center 2]

// 侧边栏配置
    sidebar: {
    	'/company/': [{
    		title: '企业端',
    		collapsable: false,
    		children: ['login', 'companyInfo', 'jisuanqi']
    	}],
    	'/policy/': [{
    		title: '管理端',
    		collapsable: false,
    		children: ['login',
    			'company',
    			'publicity',
    			'activity',
    			'special',
    			'message'
    		],
    	}],
    	// fallback
    	'/': [
    		'',
    	]
    }

# 项目部署出现样式丢失，图片加载失败的问题 #

*  资源加载失败，基本都是路径出了问题。这里的根目录 / 路径是我们之前在`/docs/.vuepress/config.js`中配置的`base`字段。
 *  例如：配置`base:'/doc/',`打包到dist之后，上传到服务器，在服务器中新建文件夹`doc`，存入打包内容即可。

# 打包 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70]  
执行：npm dev docs:build  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70 1]

# 已有vuepress项目运行 #

*  将 VuePress 安装为本地依赖 npm install -D vuepress
 *  npm run docs:dev

[Link 1]: https://vuepress.vuejs.org/zh/guide/getting-started.html
[Link 2]: https://vuepress.vuejs.org/zh/theme/default-theme-config.html#%E4%BE%A7%E8%BE%B9%E6%A0%8F%E5%88%86%E7%BB%84
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/49a464219afd455cb968319556d89146.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/f197e9e63c2845589ecb988e35af7fa6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221022/ad13d70aab7d47f695c3c3860f4767e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70]: /images/20221022/bc44083c269a4c90b67a0800b56ee8cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70 1]: /images/20221022/e907bf0913b3405ab50df5e7c60643df.png