1、打包报超出500kB

执行 npm run build 打包出现如下问题 [BABEL] Note: The code generator has deoptimised the styling of docs test.md as it exceeds the max of 500KB

解决方案如下

1.提高参 数 --max_old_space_size （提高到 102400）

 "scripts": {
   "docs:build": "set NODE_OPTIONS=--openssl-legacy-provider && node --   max_old_space_size=102400 ./node_modules/vuepress/cli.js build docs"
 }

2.项目根目录创建 .babelrc 并添加如下代码

{
 "compact": false,
 "presets": ["env", "react", "stage-0"],
 "plugins": [
 "transform-runtime"
    ]
}

然后执行如下docs:build命令即可

2、侧边栏显示四级标题

官方文档：https://vuepress.vuejs.org/config/#markdown-extractheaders (opens new window)

// ./vuepress/config.js
module.exports = {
  markdown: {
    lineNumbers: true,
    extractHeaders: ['h2', 'h3', 'h4'],
  }
}

3、将中英文及-字符替换为6位随机字符

官方文档：github地址 (opens new window)

// node_modules\@vuepress\shared-utils\lib\slugify.js

const rChinese = /[\u4e00-\u9fa5a-zA-Z-]+/g;

module.exports = function slugify(str) {
    return str.normalize('NFKD')
         .replace(rChinese, () => {
             return Math.random().toString(36).substring(2, 8); // 生成6位随机字符串
         })
}

4、实现更新提示

官方文档：https://vuepress.vuejs.org/zh/plugin/official/plugin-pwa.html#%E5%AE%89%E8%A3%85 (opens new window)

安装

yarn add -D @vuepress/plugin-pwa

使用

module.exports = {
  plugins: ['@vuepress/pwa']
}

注意

为了让你的网站完全地兼容 PWA，你需要:

• 在 .vuepress/public 提供 Manifest 和 icons
• 在 .vuepress/config.js 添加正确的 head links (opens new window)(参见下面例子).

更多细节，请参见 MDN docs about the Web App Manifest (opens new window) (opens new window).

这是一个在VuePress中完全地兼容 PWA 的例子：

module.exports = {
  head: [
    ['link', { rel: 'icon', href: '/logo.png' }],
    ['link', { rel: 'manifest', href: '/manifest.json' }],
    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
    ['link', { rel: 'apple-touch-icon', href: '/icons/apple-touch-icon-152x152.png' }],
    ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
    ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
    ['meta', { name: 'msapplication-TileColor', content: '#000000' }]
  ],
  plugins: ['@vuepress/pwa', {
      serviceWorker: true,
      updatePopup: true
  }],
}

updatePopup

• 类型: boolean|popupConfig
• 默认值: undefined

类型 popupConfig 的定义如下：

interface normalPopupConfig {
  message: string; // defaults to 'New content is available.'
  buttonText: string; // defaults to 'Refresh'
}

interface localedPopupConfig {
  [localePath: string]: normalPopupConfig
}

type popupConfig = normalPopupConfig | localedPopupConfig

本选项开启了一个用于刷新内容的弹窗。这个弹窗将会在站点有内容更新时显示出来，并提供了一个 refresh 按钮，允许用户立即刷新内容。

如果没有“刷新”按钮，则只有在所有的 Clients (opens new window) (opens new window)被关闭后，新的 Service Worker 才会处于活动状态。这意味着用户在关闭你网站的所有标签之前无法看到新内容。但是 refresh 按钮会立即激活新的 Service Worker。

serviceWorker

• 类型: boolean
• 默认值: true

如果设置为 true，VuePress 将自动生成并注册一个 Service Worker (opens new window) (opens new window)，用于缓存页面的内容以供离线使用（仅会在生产环境中启用）。

有一个别名化的模块 @sw-event 模块将会 emit 以下事件：

• sw-ready
• sw-cached
• sw-updated
• sw-offline
• sw-error

提示

只有在你能够使用 SSL 部署您的站点时才能启用此功能，因为 service worker 只能在 HTTPS 的 URL 下注册。

5、文件夹为中文提示警告

把文件夹和文件改为了中文，结果dev运行提示警告：

警告

vue-router.esm.js?8c4f:16 [vue-router] Route with path "/01.技术/05.tool/03.centos.html" contains unencoded characters, make sure your path is correctly encoded before passing it to the router. Use encodeURI to encode static segments of your path.

修改文件：node_modules@vuepress\core\lib\node\internal-plugins\routes.js

/**
 * @type {import('@vuepress/types').Plugin<{}, import('@vuepress/types').DefaultThemeConfig>}
 */
module.exports = (options, ctx) => ({
  name: '@vuepress/internal-routes',

  // @internal/routes
  async clientDynamicModules () {
    const code = importCode(ctx.globalLayout) + routesCode(ctx.pages)
    return { name: 'routes.js', content: code, dirname: 'internal' }
  }
})

/**
 * Import utilities
 * @param {string} globalLayout path of global layout component
 * @returns {string}
 */
function importCode (globalLayout) {
  return `
import { injectComponentOption, ensureAsyncComponentsLoaded } from '@app/util'
import rootMixins from '@internal/root-mixins'
import GlobalLayout from ${JSON.stringify(globalLayout)}

injectComponentOption(GlobalLayout, 'mixins', rootMixins)
`
}

/**
 * Get Vue routes code.
 * @param {array} pages
 * @returns {string}
 */

function routesCode (pages) {
  function genRoute ({
    path: pagePath,
    key: componentName,
    frontmatter: {
      layout
    },
    regularPath,
    _meta
  }) {
    let code = `
  {
    name: ${JSON.stringify(componentName)},
    path: ${JSON.stringify(pagePath)},
    component: GlobalLayout,
    beforeEnter: (to, from, next) => {
      ensureAsyncComponentsLoaded(${JSON.stringify(layout || 'Layout')}, ${JSON.stringify(componentName)}).then(next)
    },${_meta ? `\n    meta: ${JSON.stringify(_meta)}` : ''}
  }`

    const dncodedPath = decodeURIComponent(pagePath)
    if (dncodedPath !== pagePath) {
      code += `,
  {
    path: ${JSON.stringify(encodeURI(dncodedPath))},
    redirect: ${JSON.stringify(pagePath)}
  }`
    }

    if (/\/$/.test(pagePath)) {
      code += `,
  {
    path: ${JSON.stringify(encodeURI(pagePath + 'index.html'))},
    redirect: ${JSON.stringify(pagePath)}
  }`
    }

    const decodedRegularPath = decodeURIComponent(regularPath)

    if (decodedRegularPath !== pagePath) {
      code += `,
  {
    path: ${JSON.stringify(encodeURI(decodedRegularPath))},
    redirect: ${JSON.stringify(pagePath)}
  }`
    }

    return code
  }

  const notFoundRoute = `,
  {
    path: '*',
    component: GlobalLayout
  }`

  return (
    `export const routes = [${pages.map(genRoute).join(',')}${notFoundRoute}\n]`
  )
}