解决VuePress页面乱码问题

更新时间：2022年09月20日 09:27:07 作者：枫叶梨花

这篇文章主要介绍了解决VuePress页面乱码问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

VuePress页面乱码问题

公司有一个业务场景，需要用到VuePress，所以我这边就研究了一下。VuePress的官方文档写得很详细，步骤也很清晰。

官方步骤

# 创建文件夹
mkdir vuepress-starter
cd vuepress-starter
# 初始化
git init
npm init
# 安装Vue Press
npm install -D vuepress@next
# 在package.json添加脚本
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
# 忽略文件
echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore
# 创建文档
mkdir docs
echo '# HelloVuePress' > docs/README.md
# 启动
npm run docs:dev

根据上述的步骤，但是我发现页面是存在乱码

这个问题主要是编码的问题，只要将docs/README.md这个文档的编码改成UTF-8即可

VuePress 初探

VuePress是以Vue驱动的静态网站生成器，我理解功能有点类似gitbook，可以做博客或者文档说明。

建立文件夹

vuepressDemo

安装 vuepress

npm install -g vuepress

初始化

默认配置

npm init -y

配置package.json

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}

新建文件夹

最终目录如下

vuepressDemo
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json

mkdir docs
cd docs
touch / echo "" > README.md
mkdir .vuepress
cd .vuepress
mkdir public
touch / echo "" > config.js

配置页面

进入config.js 中

module.exports = {
    title: '个人主页', 
    description: '博客',
    head: [
        ['link', { rel: 'icon', href: '/img/logo.ico' }],
        ['link', { rel: 'manifest', href: '/manifest.json' }],
    ]
}

官方配置点这里

启动

npm run dev

乱码

当我启动的时候出现了中文乱码的问题，应该是我的地址中包含了中文。

解决方法：

右键乱码的markdown 文件，打开方式用记事本打开，另存为的同时修改文件格式为utf-8 ，之后删除txt后缀即可。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue实现图片切换效果
这篇文章主要为大家详细介绍了vue实现图片切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
vue-next/runtime-core 源码阅读指南详解
这篇文章主要介绍了vue-next/runtime-core 源码阅读指南详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
Ant Design Vue 添加区分中英文的长度校验功能
这篇文章主要介绍了Ant Design Vue 添加区分中英文的长度校验功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下功能，
2020-01-01
vue实现带缩略图的轮播图效果
这篇文章主要为大家详细介绍了如何使用vue实现带缩略图的轮播图效果,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的可以参考下
2024-02-02
Vue-router结合transition实现app前进后退动画切换效果的实例
下面小编就为大家带来一篇Vue-router结合transition实现app前进后退动画切换效果的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
Vue Canvas实现电子签名
这篇文章主要为大家详细介绍了Vue Canvas实现电子签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
微信内置开发 iOS修改键盘换行为搜索的解决方案
今天小编就为大家分享一篇微信内置开发 iOS修改键盘换行为搜索的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
使用yarn build 打包vue项目时静态文件或图片未打包成功的问题及解决方法
这篇文章主要介绍了使用yarn build 打包vue项目时静态文件或图片未打包成功的问题及解决方法，解决方法不复杂通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-08-08
vue 实现走马灯效果
这篇文章主要介绍了vue 实现走马灯效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
详解Vue的mixin策略
这篇文章主要介绍了Vue的mixin策略的相关资料，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下
2020-11-11