如何正确解决VuePress本地访问出现资源报错404的问题


Posted in Vue.js onDecember 03, 2020

背景

最近发现好多小伙伴刚用VuePress,然后一build完就直接用本地浏览器访问,结果出现黑块。仅仅出现那种问题还好,给项目安装 vuepress-plugin-serve 插件就行了,
但是如果有需求是需要离线查看 VuePress 生成后的文档呢?所以我特地研究了一下——

解决办法

打开 .vuepress/config.js 文件,把 base 的值改成 ./,为了方便调试,最好这样写:

//base: "/",
base: "./",

写两个,一个用于Dev,一个用于Build。

然后打开项目下的 node_modules\@vuepress\core\lib\client 下的 app.js 文件,找到下方这个片段:

const router = new Router({
 base: routerBase,
 mode: 'history',
 fallback: false,
 routes,
 scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
   return savedPosition
  } else if (to.hash) {
   if (Vue.$vuepress.$get('disableScrollBehavior')) {
    return false
   }
   return {
    selector: decodeURIComponent(to.hash)
   }
  } else {
   return { x: 0, y: 0 }
  }
 }
})

把 mode: 'history', 注释掉就行了(让它默认为 hash 模式)。

这样一来,就可以快乐地Build项目啦!

到此这篇关于如何正确解决VuePress本地访问出现资源报错404的问题的文章就介绍到这了,更多相关VuePress本地访问404内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
vue表单验证之禁止input输入框输入空格
Dec 03 #Vue.js
对vue生命周期的深入理解
Dec 03 #Vue.js
用vue设计一个日历表
Dec 03 #Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 #Vue.js
如何实现vue的tree组件
Dec 03 #Vue.js
Vue实现图书管理小案例
Dec 03 #Vue.js
Vue router安装及使用方法解析
Dec 02 #Vue.js
You might like
PHP多进程编程实例
2014/10/15 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
对python中的logger模块全面讲解
2018/04/28 Python
Python中pillow知识点学习
2018/04/30 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
Python中is和==的区别详解
2018/11/15 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
英国家电直销:Appliances Direct
2016/09/22 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
公司清洁工岗位职责
2013/12/14 职场文书
电子银行营销方案
2014/02/22 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
学校食品安全责任书
2015/01/29 职场文书
2015年监理工作总结范文
2015/04/07 职场文书