vuepress打包部署踩坑及解决

下面详细讲解“vuepress打包部署踩坑及解决”的完整攻略。

综述

VuePress 是一个基于 Vue 的静态网站生成器，它可以用来快速搭建文档网站或博客等。但是，在实际的开发过程中，我们有可能会遇到打包或部署时的问题，本文将对这些问题进行详细的解答和指导。

VuePress 打包

安装依赖

在打包之前，我们需要安装相关依赖。在终端中输入以下命令：

npm install vuepress -g

配置

VuePress 的构建配置位于 .vuepress/config.js 文件中，我们可以在其中配置一些插件、主题、页面标题等信息。

打包命令

使用以下命令进行 VuePress 的打包：

vuepress build <docs-dir> --dest <out-dir>

其中，docs-dir 是文档目录，out-dir 是打包后的输出目录。

需要注意的是，在打包之前，我们需要将图片等媒体文件放入相应的目录中，并在 Markdown 中使用相应的路径引用。

VuePress 部署

部署到 GitHub Pages

可以使用 npm 包 gh-pages 将 VuePress 生成的静态文件部署到 GitHub Pages 上。具体步骤如下：

1. 在 GitHub 上创建一个新的 repository（需开启 GitHub Pages 功能）。

2. 在终端中运行以下命令，将代码上传到该 repository 中：

git clone [e-mail]:<username>/<repo>.git

1. 在 package.json 文件中添加如下命令：

"deploy": "rm -rf docs/.vuepress/dist && vuepress build docs && gh-pages -d docs/.vuepress/dist"

1. 在终端中执行 npm run deploy 命令，等待部署完成。

部署到其他服务

VuePress 生成的静态文件可以部署到任何静态文件服务上。只需将生成的文件上传到相应的服务器中，并将访问域名配置到正确的 IP 地址上即可。

示例说明

下面以部署到 GitHub Pages 为例，详细讲解其具体步骤：

1. 在 GitHub 上创建一个新的 repository（例如：my-blog）。

2. 在终端中运行以下命令，将代码上传到该 repository 中：

git clone [e-mail]:example-user/my-blog.git
cd my-blog
mkdir docs
cd docs
touch README.md

1. 编译并上传

在终端中执行以下命令：

npm install vuepress gh-pages --save-dev

在 package.json 文件中添加如下命令：

"scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs",
  "docs:deploy": "rm -rf docs/.vuepress/dist && npm run docs:build && gh-pages -d docs/.vuepress/dist"
}

在 .vuepress/config.js 文件中添加如下内容：

module.exports = {
  title: 'My blog',
  description: 'Description of my blog',
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'About', link: '/about/' }
    ],
    sidebar: [
      '/',
      '/about/'
    ]
  }
}

运行以下命令编译开发环境并在本地查看：

npm run docs:dev

本地查看预览地址：http://localhost:8080/

最后，运行以下命令将代码部署到 GitHub Pages：

npm run docs:deploy

等待部署完成后，即可在 https://example-user.github.io/my-blog/ 上访问到你的博客网站。