解決VuePress頁面亂碼問題
更新時間：2022年09月20日 09:27:07 作者：楓葉梨花
這篇文章主要介紹了解決VuePress頁面亂碼問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
VuePress頁面亂碼問題
公司有一個業(yè)務(wù)場景，需要用到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
根據(jù)上述的步驟，但是我發(fā)現(xiàn)頁面是存在亂碼
這個問題主要是編碼的問題，只要將docs/README.md這個文檔的編碼改成UTF-8即可
VuePress 初探
VuePress是以Vue驅(qū)動的靜態(tài)網(wǎng)站生成器，我理解功能有點類似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 docscd docstouch / echo "" > README.mdmkdir .vuepresscd .vuepressmkdir publictouch / 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
亂碼
當我啟動的時候出現(xiàn)了中文亂碼的問題，應(yīng)該是我的地址中包含了中文。
解決方法：
右鍵亂碼的markdown 文件，打開方式用記事本打開，另存為的同時修改文件格式為utf-8 ，之后刪除txt后綴即可。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在vue項目中假使我們在同一個路由下,只是改變路由后面的參數(shù)值,期望達到數(shù)據(jù)的更新,這篇文章主要給大家介紹了關(guān)于vue3監(jiān)聽路由的變化的相關(guān)資料,需要的朋友可以參考下2023-09-09
vue路由傳參的基本實現(xiàn)方式小結(jié)【三種方式】
這篇文章主要介紹了vue路由傳參的基本實現(xiàn)方式,結(jié)合實例形式總結(jié)分析了vue.js路由傳參的三種實現(xiàn)方式,包括params顯示傳參、不顯示參數(shù)以及query顯示參數(shù)傳參,需要的朋友可以參考下2020-02-02
VUE之關(guān)于store狀態(tài)管理核心解析
這篇文章主要介紹了VUE之關(guān)于store狀態(tài)管理核心解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家詳細介紹了vue選項卡組件的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細介紹了如何基于vue手動實現(xiàn)一個日歷組件,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以跟隨小編一起學(xué)習一下2024-01-01
vue+iview如何實現(xiàn)拼音、首字母、漢字模糊搜索
這篇文章主要介紹了vue+iview如何實現(xiàn)拼音、首字母、漢字模糊搜索，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue子組件中mounted取不到props中的值情況，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
今天被vue中proxy配置困擾了一天,記錄一下,下面這篇文章主要給大家介紹了關(guān)于Vue配置文件中的proxy配置方式的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
vue3使用Pinia修改state的三種方法(直接修改，$patch，actions)
Vue3?Pinia是一個狀態(tài)管理庫,專門為Vue3設(shè)計優(yōu)化,它提供了一種簡單而強大的方式來管理應(yīng)用程序的狀態(tài),并且與Vue3的響應(yīng)式系統(tǒng)緊密集成,本文給大家介紹了vue3使用Pinia修改state的三種方法,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了淺談vue-router 路由傳參的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12