您现在的位置是：网站首页> 编程资料编程资料

解决VuePress页面乱码问题_vue.js_

2023-05-24 434人已围观

简介 解决VuePress页面乱码问题_vue.js_

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后缀即可。 

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

您可能感兴趣的文章:

上一篇：JavaScript中执行上下文和执行栈_javascript技巧_

下一篇：Vue 中的 computed 和 watch 的区别详解_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网