快捷導(dǎo)航

解決VuePress頁面亂碼問題

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

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

VuePress頁面亂碼問題

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

官方步驟

# 創(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
# 啟動(dòng)
npm run docs:dev

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

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

VuePress 初探

VuePress是以Vue驅(qū)動(dòng)的靜態(tài)網(wǎng)站生成器，我理解功能有點(diǎn)類似gitbook，可以做博客或者文檔說明。

建立文件夾

vuepressDemo

安裝 vuepress

npm install -g vuepress

初始化

默認(rèn)配置

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

配置頁面

進(jìn)入config.js 中

module.exports = {
? ? title: '個(gè)人主頁',?
? ? description: '博客',
? ? head: [
? ? ? ? ['link', { rel: 'icon', href: '/img/logo.ico' }],
? ? ? ? ['link', { rel: 'manifest', href: '/manifest.json' }],
? ? ]
}

官方配置點(diǎn)這里

啟動(dòng)

npm run dev

亂碼

當(dāng)我啟動(dòng)的時(shí)候出現(xiàn)了中文亂碼的問題，應(yīng)該是我的地址中包含了中文。

解決方法：

右鍵亂碼的markdown 文件，打開方式用記事本打開，另存為的同時(shí)修改文件格式為utf-8 ，之后刪除txt后綴即可。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目從node8.x升級到12.x后的問題解決
這篇文章主要介紹了vue項(xiàng)目從node8.x升級到12.x后的問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
Vue3中SetUp函數(shù)的參數(shù)props、context詳解
我們知道setup函數(shù)是組合API的核心入口函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3中SetUp函數(shù)的參數(shù)props、context的相關(guān)資料,需要的朋友可以參考下
2021-07-07
vue豎向步驟條方式
這篇文章主要介紹了vue豎向步驟條方式,具有很好的參考價(jià)值,希望對大家有所幫助,
2023-12-12
Vue2 SSR渲染根據(jù)不同頁面修改 meta
本篇文章主要介紹了Vue2 SSR渲染根據(jù)不同頁面修改 meta，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
源碼淺析Vue3中的組件掛載
這篇文章主要帶大家從源碼分析一下Vue3中的組件掛載的相關(guān)知識,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以跟隨小編一起了解一下
2023-09-09
Vue3造輪子之打包構(gòu)建配置二級目錄方式
這篇文章主要介紹了Vue3造輪子之打包構(gòu)建配置二級目錄方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue3項(xiàng)目導(dǎo)入異常Error:@vitejs/PLUGIN-vue?requires?vue?(＞=3.2.13
這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目導(dǎo)入異常Error:@vitejs/PLUGIN-vue?requires?vue?(＞=3.2.13)的解決辦法,文中將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01
Vue3+echarts繪制世界地圖的示例代碼
最近做項(xiàng)目需要實(shí)現(xiàn)世界地圖,本文主要介紹了Vue3+echarts繪制世界地圖的示例代碼,具有一定的參考價(jià)值,感謝的可以了解一下
2024-03-03
關(guān)于keep-alive路由多級嵌套不生效的解決方案
本文主要介紹了關(guān)于keep-alive路由多級嵌套不生效的解決方案，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue模塊移動(dòng)組件的實(shí)現(xiàn)示例
這篇文章主要介紹了vue模塊移動(dòng)組件的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05