解决VuePress页面乱码问题

目录VuePress页面乱码问题官方步骤VuePress初探建立文件夹安装vuepress初始化新建文件夹配置页面启动乱码VuePress页面乱码问题公司有一个业务场景，需要用到VuePress，...

目录

vuePress页面乱码问题
官方步骤
VuePress 初探
建立文件夹
安装 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 '# HelloVuePjsress' > 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 .vueprphpess
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后缀即可。 

js

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