解決VuePress頁面亂碼問題

更新時間：2022年09月20日 09:27:07 作者：楓葉梨花

這篇文章主要介紹了解決VuePress頁面亂碼問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

VuePress頁面亂碼問題

公司有一個業(yè)務場景，需要用到VuePress，所以我這邊就研究了一下。VuePress的官方文檔寫得很詳細，步驟也很清晰。

官方步驟

# 創(chuàng)建文件夾
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
# 創(chuàng)建文檔
mkdir docs
echo '# HelloVuePress' > docs/README.md
# 啟動
npm run docs:dev

根據上述的步驟，但是我發(fā)現(xiàn)頁面是存在亂碼

這個問題主要是編碼的問題，只要將docs/README.md這個文檔的編碼改成UTF-8即可

VuePress 初探

VuePress是以Vue驅動的靜態(tài)網站生成器，我理解功能有點類似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' }],
? ? ]
}

官方配置點這里