如何正确解决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 相关文章推荐
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
vue修饰符.capture和.self的区别
Apr 22 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完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
PHP中include()与require()的区别说明
2010/03/10 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
php cookie 详解使用实例
2016/11/03 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
jcrop基本参数一览
2013/07/16 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
Node.js简单入门前传
2017/08/21 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
在django模板中实现超链接配置
2019/08/21 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
Python中的面向接口编程示例详解
2021/01/17 Python
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
电厂厂长岗位职责
2014/01/02 职场文书
寄语十八大感言
2014/02/07 职场文书
情人节寄语大全
2014/04/11 职场文书
财务情况说明书范文
2014/05/06 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
人代会简报
2015/07/21 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python
用JS写一个发布订阅模式
2021/11/07 Javascript