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

背景

最近发现好多小伙伴刚用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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 如何使用VuePress搭建一个类型element ui文档

    网站成果样式 项目书写步骤 github地址:https://github.com/xuhuihui/dataCom 官网:http://caibaojian.com/vuepress/guide/getting-started.html 参考文章:https://www.jb51.net/article/156259.htm 前言:我先git clone官方github,运行查看完整效果. 再根据官网介绍和参考文章,结合完整的代码,自己一步步配置内容.最后,参考element的设计样式,修改并

  • 浅谈vuepress 踩坑记

    vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器,实际上就是一个vue的spa应用,内置webpack,可以用来写文档.恰好最近需要为一些组件写文档,就动手撸了一波,毕竟刚发布,遇到不少坑,最终还是磕磕碰碰的运行起来了,为了避免大家踩同样的坑,特意将搭建的过程记录下来,分享一波. 以下是几个已知的问题 因为util.promisify是在node 8.0之后引入的,所以如果你不想像我一样浪费三个小时的时间,请查看并且更新node版本 建议不要使用webpack-sim

  • 超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法

    五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了. 记得最后一定要看注意事项! Vuepress介绍 官网:https://vuepress.vuejs.org/ 类似hexo一个极简的静态网站生成器,用来写技术文档不能在爽.当然搭建成博客也不成问题. Vuepress特点 响应式,也可以自定义主题与hexo类似 内置markdown(还增加了一些扩展),并且可以在其使用Vue组件 Google Analytics 集成 PWA 自动生成Service Worker 快速上

  • 使用vuepress搭建静态博客的示例代码

    什么是vuePress vuePress是以vue驱动的主题系统的简约静态网站生成工具(拥有自己的默认主题). veuPress由vue,vue-router,webpack驱动的单页面应用,每个markdonw文件都使用markdonw-it编译为html文件,然后作为vue组件的模板来处理. 中文官网 VuePress仓库 项目地址 VuePress 有很多优点: 界面简洁优雅(个人感觉比 HEXO 好看) 容易上手(半小时能搭好整个项目) 更好的兼容.扩展 Markdown 语法 响应式布

  • VuePress 中如何增加用户登录功能

    VuePress 中如何增加用户登录功能

    VuePress是什么? 先让我们看看 VuePress能干什么?有什么效果? 很像vue官网的文档页面,因为vuePress就是尤大大的一个力作 vuePress官网介绍介绍的很详细,这里只做搭建VuePress项目教程 在 VuePress 中增加用户登录 VuePress 是 Vuejs 官方提供的一个快速建设文档站点的工具,在简单配置好功能后,需要做的事情就剩下写好一个个 Markdown 文档. 因为 VuePress 提供了可以在 Markdown 中使用 Vue 的能力,所以有时候

  • VuePress 快速踩坑小结

    VuePress 快速踩坑小结

    最近有个开源项目非常火,那就是尤小右开发的 VuePress,VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码,并且 VuePress 对编译后的 HTML 文件做了一些针对搜索引擎的优化.另外 VuePress 针对 Markdown 文件做了一些扩展使其功能更加强大,本文将围绕搭建一个 Github 的静态博客展开. 为项目加入 VuePress 第一步为您的项目安装 VuePress,如果您的项目代码中并没有 package.json文件,请先执行 npm

  • VuePress 静态网站生成方法步骤

    使用技术: VuePress - Vue 驱动的静态网站生成器 仓库地址:https://github.com/yinian-R/vuepress-demo 全局安装 ## 安装 yarn global add vuepress # 或者:npm install -g vuepress 现有项目 如果你想在一个现有项目中使用 VuePress,同时想要在该项目中管理文档,则应该将 VuePress 安装为本地依赖. ## 没有项目可以初始化 yarn init ## 将 VuePress 作为一

  • Vuepress 搭建带评论功能的静态博客的实现

    vuepress 是 Vue 驱动的静态站点生成工具 本文仅介绍,搭建静态博客的过程,具体教程及文档请点击进入 vuepress中文网 点击查看项目代码 vuepress初始化 下面初始化 # 将 github 新创建的仓库克隆到本地 git clone git@github.com:zhb333/readme-blog.git # 进入项目 cd readme-blog # npm 初始化, 按照提示回车 npm init # 安装 vuepress npm i vuepress -D # 安

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

    背景 最近发现好多小伙伴刚用VuePress,然后一build完就直接用本地浏览器访问,结果出现黑块.仅仅出现那种问题还好,给项目安装 vuepress-plugin-serve 插件就行了, 但是如果有需求是需要离线查看 VuePress 生成后的文档呢?所以我特地研究了一下-- 解决办法 打开 .vuepress/config.js 文件,把 base 的值改成 ./,为了方便调试,最好这样写: //base: "/", base: "./", 写两个,一个用于

  • SpringBoot启动访问localhost:8080报错404的解决操作

    1.确定本地网络是通的: 2.确定SpringBootq启动后是不报错的 3.查看是不是自己在配置文件中加入了项目路径: 如果加入了项目路径的话,直接访问localhost:8080是不会到欢迎页面的,需要加上项目路径才能访问到欢迎页面,即localhost:8080/sell 补充知识:SpringBoot的web项目启动起来无法访问,访问时还是提示无法访问该网站 有时候可能是因为你的pom中导入了太多的依赖,一些依赖之间可能存在冲突导致项目未完全启动而无法访问显示:无法访问该网站 以上这篇S

  • vue-cli3访问public文件夹静态资源报错的解决方式

    今天在项目中使用了public文件夹里的静态资源,在本地测试没有发现问题,但是项目部署到fat服务器却报了404错误. 我发现原因在于我的项目没有部署在域名的根部,而我引用public文件是通过绝对路径方式引用的,因为就出现了路径错误. 路径如下: <img :src="`/image1.png`"> 在官网文档中发现这种情况需要为 URL 配置 publicPath 前缀:process.env.BASE_URL 正确的引用路径是: <img :src="

  • 解决VueCil代理本地proxytable无效报错404的问题

    前言 因为项目中遇到了这个bug:Vue cil2中配置代理proxytable成功,却无效报错404,在后端和代理都配置无误的情况下,还是报404,先已解决,特记录,希望能帮助到他人: 正文 1. 为什么要使用代理? 代理的作用是:把请求代理转发到其他服务器的中间件: 例如:我们当前主机为http://localhost:8080/,现在我们有一个需求,如果我们请求/api,我们不希望由3000来处理这个请求,而希望由另一台服务器https://www.example.org/api来处理这个

  • 基于php双引号中访问数组元素报错的解决方法

    最近在做微信公众号开发,在一个发送图文接口中,需要把数组元素拼接在XML字符串中 foreach ($itemArr as $key => $value){ $items .= "<item> <Title><![CDATA[$value['title']]]></Title> <Description><![CDATA[[$value['description']]]></Description> <

  • maven引入本地jar包运行报错java.lang.NoClassDefFoundError解决

    目录 正文 maven引入本地jar的示例 配置maven将本地jar打入package中 maven打包知识分享 scope详解 正文 下文笔者讲述maven引入本地jar包时,运行报错"java.lang.NoClassDefFoundError"的处理方法分享,如下所示 今天在编写maven项目    导入本地jar包    部署到服务器上找不到包  报错信息如:java.lang.NoClassDefFoundError那么如何解决呢?   这种问题是由于,本地jar包在打包的

  • Vue3刷新页面报错404的解决方法

    Vue3刷新页面报错404的解决方法

    vue-router历史模式 最近在学习Vue3的过程中遇到了一个问题,那就是在写代码的过程中,每当代码发生了变动,页面一刷新,原先的页面就会变成这个样子: 打开控制台一看: 这时候刷新.在浏览器地址栏直接输入地址也不管用. 每次写一点代码,都不能及时看到结果,需要从8080重新进入才可以,其中的崩溃可想而知. 此时判断应该是路由跳转的问题,于是来到router.js文件看一看: import { createRouter, createWebHistory } from 'vue-router

  • nginx访问动态接口报错404Not Found问题解决

    目录 问题描述 解决思路 彻底解决 问题描述 计设做了一套招聘背调系统,前后端分别使用了Ant Design Vue与JFinal框架.想要将项目部署到服务器上,但是外部访问一直报错404Not Found 解决思路 把错误定位为:找不到动态接口,但是不知道是项目中出现了问题,还是经nginx代理后出现了问题.因此要分别测试 项目本身的接口 和 nginx代理后的接口. 首先测试项目内接口: 在ubuntu端输入命令:curl http://localhost:port/xxx/xxx 这里我的

  • 解决python3运行selenium下HTMLTestRunner报错的问题

    修改HTMLTestRunner.py以支持python3+ 搜索到的结果整理 修改一: 在python shell里输入 >>>import HTMLTestRunner >>> dir(HTMLTestRunner) 发现不认识StringIO (No module named StringIO) 确实3里面没有这个了,第94行引入的名称要改,改成import io,539行要改成self.outputBuffer = io.BytesIO() 修改二: 运行程序的

  • laravel 解决paginate查询多个字段报错的问题

    用laravel 框架想实现一个分页接口,返回数据表中其中一部分字段 $list = DB::table('booklist_table')->orderBy('create_time','asc')->paginate($size,['id','title','author','image'])->toJson(); return json_decode($list,true); 结果运行报错 "SQLSTATE[42000]: Syntax error or access

随机推荐