优化改进
打包报超出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命令即可
侧边栏显示四级标题
官方文档：https://vuepress.vuejs.org/config/#markdown-extractheaders
// ./vuepress/config.js
module.exports = {
markdown: {
lineNumbers: true,
extractHeaders: ['h2', 'h3', 'h4'],
}
}
将中英文及-字符替换为6位随机字符
官方文档：github地址
// 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位随机字符串
})
}
实现更新提示
官方文档：https://vuepress.vuejs.org/zh/plugin/official/plugin-pwa.html#%E5%AE%89%E8%A3%85
安装
yarn add -D @vuepress/plugin-pwa
使用
module.exports = {
plugins: ['@vuepress/pwa']
}
- 在
.vuepress/public提供 Manifest 和 icons - 在
.vuepress/config.js添加正确的 head links(参见下面例子).
更多细节，请参见 MDN docs about the Web App Manifest (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)被关闭后，新的 Service Worker 才会处于活动状态。这意味着用户在关闭你网站的所有标签之前无法看到新内容。但是
refresh按钮会立即激活新的 Service Worker。
serviceWorker
- 类型:
boolean - 默认值:
true
如果设置为 true，VuePress 将自动生成并注册一个 Service Worker (opens new window)，用于缓存页面的内容以供离线使用（仅会在生产环境中启用）。
有一个别名化的模块 @sw-event 模块将会 emit 以下事件：
sw-readysw-cachedsw-updatedsw-offlinesw-error
::: tip 提示
只有在你能够使用 SSL 部署您的站点时才能启用此功能，因为 service worker 只能在 HTTPS 的 URL 下注册。
:::
文件夹为中文提示警告
把文件夹和文件改为了中文，结果dev运行提示警告：
修改文件：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]`
)
}
最后更新于 2026-02-18 18:15