解决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 '# 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后缀即可。

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

赞 (0)

相关推荐

  • 关于vuepress部署出现样式的问题及解决

    关于vuepress部署出现样式的问题及解决

    目录 vuepress部署出现样式问题 vuepress个人博客部署遇到的一些问题 1.js和css出现404问题 2.每次都要重复操作打包.运行.上传github很麻烦怎么办? 3.github.io无法打开怎么办? vuepress部署出现样式问题 以前在安装hexo的时候出了样式问题,现在用vuepress也出现了相同的问题. 本地测试完全可以 然而打包之后就彻底乱了 即使是自己本地打包成dist之后也会出现相同的问题 有点困扰,应该是打包配置的问题 通过修改index.html里的内容.

  • Vuepress使用vue组件实现页面改造

    Vuepress使用vue组件实现页面改造

    目录 引言 前置环境 使用 vue 组件 安装插件 配置插件 创建 vue 组件 使用 vue 组件 引言 只是单纯的用 vuepress 写个 markdown 文档,的确会处处受限,满足不了定制化的样式和功能,有时只是简单的修改下某个页面,或者做些组件演示的内容,而不是开发一整套主题.所以研究下如何在项目中使用 vue 组件还有非常有必要的,毕竟也没那么难. 前置环境 node 环境 node v16.13.0 VuePress 版本 VuePress v2.0.0-beta.48 每个版本

  • Vuepress生成文档部署到gitee.io的注意事项及说明

    Vuepress生成文档部署到gitee.io的注意事项及说明

    目录 Vuepress生成文档部署到gitee.io注意事项 在gitee中部署VuePress博客问题 Vuepress生成文档部署到gitee.io注意事项 1.静态资源要放在.vuepress/public目录下,比如创建一个assets/img/目录.把图片文件放在目录下面. 2.本地开发的时候,每次更新文件后,需要运行 vuepress dev .命令重新发布. 3.运行vuepress build .命令会编译出来一个静态文件的dist目录.只要把这个目录的东西push到gitee.

  • vuepress打包部署踩坑及解决

    vuepress打包部署踩坑及解决

    目录 vuepress打包部署踩坑记录 vuepress打包报错:error Error rendering /: 问题 方案1 方案2 vuepress打包部署踩坑记录 官网教程 官网给了多种部署方案,这里我才用的是部署到github上 在你的项目中,创建一个如下的 deploy.sh 文件(请自行判断去掉高亮行的注释): #!/usr/bin/env sh # 确保脚本抛出遇到的错误 set -e # 生成静态文件 npm run docs:build # 进入生成的文件夹 cd docs/

  • 解决Vuepress码云部署及自动跳转404的问题

    解决Vuepress码云部署及自动跳转404的问题

    目录 Vuepress码云部署及自动跳转404 介绍 部署 GitHub 页面 推到你仓库的的 gh-page 分支 码云页面-Gitee Pages Vuepress的简单使用 安装 Vuepress码云部署及自动跳转404 介绍 VuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档而优化的默认主题.它是为了支持 Vue 子项目的文档需求而创建的. 由 VuePress 生成的每个页面,都具有相应的预渲染静态 HTML,它们能提供出色的加载

  • vuepress实现自定义首页的样式风格

    vuepress实现自定义首页的样式风格

    目录 vuepress自定义首页的样式风格 正文 vuepress2.x修改默认样式的小技巧 详解 vuepress自定义首页的样式风格 如何自定义vuepress的首页设计风格呢?比如,我希望首页下面的红框内容是可点击的: 请看正文步骤 正文 在docs -> .vuepress下新建theme文件夹,再在theme文件夹下新建components -> Home.vue, 将vuepress -> packages -> @vuepress -> theme-defaul

  • VuePress使用Algolia实现全文搜索

    VuePress使用Algolia实现全文搜索

    目录 引言 确认眼神 申请授权 实施部署 调试爬取 总结回顾 引言 Algolia 为构建者提供构建世界级体验所需的搜索和推荐服务.Algolia 是一个数据库实时搜索服务,能够提供毫秒级的数据库搜索服务,并且其服务能以 API 的形式方便地布局到网页.客户端.APP 等多种场景. VuePress 官方文档就有 Algolia 搜索插件,可以直接安装使用,使用 Algolia 搜索最大的好处就是方便,它会自动爬取网站的页面内容并构建索引,你只用申请一个 Algolia 授权服务,在网站上添加一

  • 解决VuePress页面乱码问题

    解决VuePress页面乱码问题

    目录 VuePress页面乱码问题 官方步骤 VuePress 初探 建立文件夹 安装 vuepress 初始化 新建文件夹 配置页面 启动 乱码 VuePress页面乱码问题 公司有一个业务场景,需要用到VuePress,所以我这边就研究了一下.VuePress的官方文档写得很详细,步骤也很清晰. 官方步骤 # 创建文件夹 mkdir vuepress-starter cd vuepress-starter # 初始化 git init npm init # 安装Vue Press npm i

  • 请求转发jsp页面乱码问题的快速解决方法

    •在最近的项目中 使用了jsp+servlet来开发项目,但是由于后台的不太熟练 导致了困难重重.所幸 学习能力还可以 一边做一遍学吧. •今天的问题:请求转发后页面的乱码问题 •由于特殊原因--图片上传的form表单无法通过ajax提交 因此必须使用form表单直接提交.但是这样会导致一个问题:前后台交互的时候效果不好.为什么效果不好?这里说的不是功能的问题.作为web开发者,客户的体验我们要放在第一位.因此,我们必须将对客户的信息反馈放在一个比较重要的地位.说白了,就是上传个图片成没成功?我

  • 如何解决freemarker静态化生成html页面乱码的问题

    目录 freemarker静态化生成html页面乱码的问题 下面是springmvc的核心代码 在网上也查了下大致给了以下几种解决方案 freemarker页面静态化步骤以及相关注意事项 Freemarker 例子 模板 模板 配置文件 总结 freemarker静态化生成html页面乱码的问题 今天在整理之前所学的知识,在复习freemarker生成html页面的时候出现了中文乱码的问题, 在费了一番时间后终于找到问题的原因,觉得挺有意思,就把这段记录下来. 下面是springmvc的核心代码

  • JSP利用过滤器解决request中文乱码问题

    本文为大家分享了JSP用过滤器解决request中文乱码问题,具体内容如下 (1)客户端的数据一般是通过HTTP  GET/POST方式提交给服务器,在服务器端用request.getParameter() 读取参数时,很容易出现中文乱码现象. (2)用过滤器解决request中文乱码问题. (3)代码如下: package my; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public clas

  • springMVC解决ajax请求乱码的三种方法

    springMVC解决ajax请求乱码的问题 前言: 最近在项目的使用过程中发现在springmvc的项目中,使用返回页面的请求方式,数据都能正常显示,但是对于ajax的请求,始终显示乱码.首先第一种是因为我们在web.xml中配置了spring的字符编码过滤器,那么使用ajax请求为什么就不行了呢?下面简单的分析一下,仅供参考. 先列出简单的请求代码: 浏览器端: <script type="text/javascript"> $.ajax({ type: "P

  • 谈谈为JAXB和response设置编码，解决wechat4j中文乱码的问题

    谈谈为JAXB和response设置编码，解决wechat4j中文乱码的问题

    如果有哪一个做程序员的小伙伴说自己没有遇到中文乱码问题,我是不愿意相信的.今天在做微信订阅号的智能回复时,又一时迷乱的跳进了中文乱码这个火坑.刚解决问题时,都欢呼雀跃了,完全忘记了她曾经带给我的痛苦. 一.问题描述 看到没,红色框框内的乱码赤裸裸的对我进行挑衅,而我却无可奈何,真是糟糕透顶. 二.寻求解决之道 面对问题,只有拿着刀逼自己去解决啊,能怎么样呢? 首先,必须搞清楚微信智能回复的机制,画图如下: ps,工具用得不好,请见谅. 接下来,我们抓重点,看乱码重要发生在什么位置. 1.cont

  • 用js提交表单解决一个页面有多个提交按钮的问题

    用js提交表单解决一个页面有多个提交按钮的问题,主要是判断是否为提交文本,然后再执行相应的动作,比较简单. <pre class="javascript" name="code">function check(txt){ $j("form").submit(function(){ if($txt=="提交"){ this.action="doAddMessage.action?button=提交"

  • 解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法

    解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法

    最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实现滚动到某位置功能 一个最主要的功能就是实现点击标题页面滚动,因为我们要滚动到页面某个标题,所以需要计算出滚动这个元素的具体绝对位置,而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量,此处不适用. 此处应使用浏览器原生提供的 getBoundingClientRect 接口,此

  • 解决phpmyadmin中文乱码问题。。。

    解决phpmyadmin中文乱码问题... 去phpMyAdmin的根目录下,打开以下这个文件: libraries/select_lang.lib.php 1.找到有"zh-gb2312"的那一行,把'zh-gb2312' 改成 'zh-gb2312-utf-8' 为什么这样加?那是因为服务器会把没有"-utf-8"的语言过滤掉,在libraries/database_interface.lib.php 第168行,根据英文说:"为了防止混淆"

随机推荐