vue项目实现github在线预览功能

最近在使用 vue-cli 脚手架工具构建自己的第一个 vue 项目，有点小激动，想把它上传到 github 并展示一下预览效果，结果踩了好多坑，折腾了大半天才弄好。

这里假设你也是和我一样使用了 vue-cli 搭建了自己的项目，并且项目也已经上传到了 github

问题1

当我们在命令行执行 npm run build 后，项目的目录下会生成一个 dist 文件夹，它里面又包含一个 static 文件夹和一个 index.html 文件，这是 webpack 最终打包好的文件

我们先尝试在浏览器打开 index.html

咦，为什么页面显示是空白的？打开控制台，细心的朋友可能会发现， script 标签的引入路径好像不对啊，因为 static 文件夹和 index.html 是在同一个目录下的，这里却是从根目录引入 static 下的文件，正确的路径应该是 ./ 开头的相对路径： src='./static/...' 或者 src='static/...'

是哪里出了问题？其实这跟配置资源的路径有关，打开项目根目录 config 文件夹下的 index.js ，定位到 build 下的 assetsPublicPath （dev下也有一个assetsPublicPath，别搞错了，我就是在这里踩了第一个坑），把

assetsPublicPath: '/' 修改为 assetsPublicPath: './'

这下可找出原因，因为这里把静态资源路径设置为在根目录下，所以 script 标签的引入路径就找不到 static 文件夹下的文件了

重新执行 npm run build ，再打开 index.html 文件

OK!在浏览器可以看到页面效果了！

也行你会问，为什么 assetsPublicPath 的路径要设置为在根目录下，这不是在折腾我们吗？其实这是因为在真正的项目开发中， index.html 和 static 文件夹会被放到服务器的根目录下，然后进行线上发布。

问题2

本地预览问题解决了，接着我们把项目 push 到 github

这里又出问题了！ dist 文件没有被上传到 github ，怎么回事？找到项目根目录的 .gitignore 文件，这里设置一些文件名，对应的文件将不会被提交到 github 上面，而 dist 被设置在里面，所以就不能上传到 github 上了，我们可以把 dist 从文件里移除。 当然还有另一种办法，就是在操作 git 命令时，把 git add. 改为 git add -f

dist 意思是强制把 dist 文件提交到 github 。

好了，现在我们已经可以在 github 仓库里看到 dist 文件夹。

疑惑，什么 dist 文件夹要设置不被提交？ 试想一下，在真正项目开发中， dist 文件夹中的 static 和 index.html 最终是要被扔到服务器上的，而不是提交到 github 上。

现在还是不能实现项目的线上预览效果，点击项目的 setting 项，然后找到 Github Pages

选择 master branch ，保存，接着你会看到项目在线预览链接，点击链接

此时，你会看到页面一片空白，别急，在地址栏后面添加 dist （因为 index.html 是在 dist目录 下），回车，好了，线上页面效果出来了

至此，项目的在线预览效果就实现了！！

还没有结束！在项目的 master 分支上，混合了源代码和页面预览文件，能不能把两者分开？而且还有一个问题， index.html 总是在 dist 路径下的，能不能项目名称直接跟 index.html 。这里就引出另外一种办法了。

另外一种办法

采用 github 的 gh-pages 分支制作 GitHub Pages ，只把 dist 添加到 gh-pages 分支,这样就把源代码和页面预览文件分开了

（先把本地的 dist 文件夹删除，再上传到 github ，更新 master 分支）

git 命令操作

git run build
  git branch gh-pages   //创建gh-pages分支
  git checkout gh-pages  //切换到gh-pages分支
  git add -f dist     //强制把dist文件夹提交到github
  $ git subtree push --prefix dist origin gh-pages  //把dist文件夹单独部署到gh-pages分支

这里要选择 gh-pages branch ，再点击连接，如果此时看到空白页面，别急，稍等一会（内容更新需要时间）

好了，现在看仓库的 master 分支，不存在 dist 文件夹了，再看线上预览地址，也完美了

总结

以上所述是小编给大家介绍的vue项目实现github在线预览功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue实现的网易云音乐在线播放和下载功能案例

    vue实现的网易云音乐在线播放和下载功能案例

    本文实例讲述了vue实现的网易云音乐在线播放和下载功能.分享给大家供大家参考,具体如下: 效果如图: 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"

  • Vuejs仿网易云音乐实现听歌及搜索功能

    Vuejs仿网易云音乐实现听歌及搜索功能

    前言 前端时间学了vue,一开始看了vue1.0,后来实在觉得技术总得实践,就直接上手vue2.0.然后花了将近一周时间做了一个网易云音乐的小项目.一开始觉得项目比较小,没必要用vuex所以就没有使用,但是后来发现数据流传输有点麻烦,后续会使用vuex. 技术栈 vue+vue-router(核心框架) better-scroll(使移动端滑动体验更加流畅) vue-lazyload(用户图片懒加载) nprogress(用于加载过渡) axios(请求) 功能分析与设计 首先我先参考了现有的一

  • vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法

    vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法

    目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框.网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受推荐的pdf.js插件来实现. pdf.js可以从github上clone下来,然后本地gulp生成可用的pdf.js和pdf.worker.js(参考readme即可). 不过更简单的方法是使用cnpm来安装: cnpm isntall --save pdfjs-dist,然后可以在项目中使用了,

  • 利用Vue.js实现求职在线之职位查询功能

    利用Vue.js实现求职在线之职位查询功能

    前言 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 本文主要介绍的是关于利用Vue.js实现职位查询功能的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 知识点: v-on, v-for, v-if, props, $emit,动态Prop, Class 与 Style 绑定 P1 分页查询 查询参数 查询参数:

  • vue+socket.io+express+mongodb 实现简易多房间在线群聊示例

    vue+socket.io+express+mongodb 实现简易多房间在线群聊示例

    项目简介 主要是通过做一个多人在线多房间群聊的小项目.来练手全栈技术的结合运用. 项目源码:chat-vue-node 主要技术: vue2全家桶 + socket.io + node(express) + mongodb(mongoose) 环境配置: 需安装配置好 node,mongodb环境(参考:http://www.jb51.net/article/109449.htm); 建议安装 Robomogo 客户端来管理mongodb数据. 编译运行: 1.开启MongoDB服务,新建命令行

  • 基于vue开发的在线付费课程应用过程

    使用 vux UI组件库 使用 vue-navigation 缓存页面,此库实现了前进刷新后退读缓存的功能,像原生APP导航一样.用子路由的方式实现tabbar有bug,用vuex解决了. 使用 lib-flexible 解决移动页面适配 来一个清单 "dependencies": { "fastclick": "^1.0.6", "lib-flexible": "^0.3.2", "lodash

  • vue translate peoject实现在线翻译功能【新手必看】

    vue translate peoject实现在线翻译功能【新手必看】

     开始 这是一适合新手练习的小项目,一个在线翻译的demo. 在正式开始前,先啰嗦一下,是一位网友给我的建议,就是不要强行组件化的问题 开始做Vue时我们可能会喜欢拆很多组件出来 但记住组件是为了复用(常见如公共菜单按钮栏等) 如非能够复用的情况其实并不用真的拆出组件来 . 当然,这个项目里因为是练手,所以强行组件化来涉及更多的vue用法. 目录结构 src下新建了两个文件:TranslateForm.vue表单组件和TranslateText.vue翻译结果组件 涉及的语法 指令:v-mode

  • 实现Vue的markdown文档可以在线运行的方法示例

    markdown 文档中Vue代码 可执行啦,而且可以边看边执行.这样就可以用markdown文档的形式,写自己的Vue博客了, 可以方便介绍自己的原创组件,很酷的执行. Github https://github.com/zhangKunUserGit/vue-markdown-run DEMO https://zhangkunusergit.github.io/vue-markdown-run/dist/ 安装 npm install vue-markdown-run --save 用法 (

  • vue项目实现github在线预览功能

    最近在使用 vue-cli 脚手架工具构建自己的第一个 vue 项目,有点小激动,想把它上传到 github 并展示一下预览效果,结果踩了好多坑,折腾了大半天才弄好. 这里假设你也是和我一样使用了 vue-cli 搭建了自己的项目,并且项目也已经上传到了 github 问题1 当我们在命令行执行 npm run build 后,项目的目录下会生成一个 dist 文件夹,它里面又包含一个 static 文件夹和一个 index.html 文件,这是 webpack 最终打包好的文件 我们先尝试在浏

  • vue项目中实现图片预览的公用组件功能

    今天产品提出了一个查看影像的功能需求. 在查看单据的列表中,有一列是影像字段,一开始根据单据号调用接口查看是否有图片附件,如果有则弹出一个全屏的弹出层,如果没有给出提示.而且,从列表进入详情之后,附件那边也会有一个查看影像的按钮. 所以,根据需求,多个组件需要用到查看影像的功能,所以考虑做一个公用组件,通过组件传值的方法将查看影像文件的入参传过去. 后来,产品要求图片可以旋转缩放. 废话不多说,贴上代码: <template> <div class="filePreview&q

  • Vue实现docx、pdf格式文件在线预览功能

    目录 介绍 docx 安装 使用 PDF 安装 引入和使用 pdf的放大和缩小 多格式的文件渲染函数映射 不支持的文件提示处理 总结 介绍 在业务中,如果遇到文档管理类的功能,会出现需要在线预览的业务需求,本文主要是通过第三方库来实现文档预览功能,并将其封装成preview组件 docx docx的实现需要使用docx-preview插件 安装 npm i docx-preview 使用 创建一个容器标签 <div ref="file" v-show="extend =

  • vue3如何实现PDF文件在线预览功能

    vue3如何实现PDF文件在线预览功能

    目录 概述 正文 创建 vue3 项目 添加 PDF 预览插件 总结 概述 之前我们用 Reactjs + React-PDF 实现了 React 版的 PDF 文件预览,今天我们用 Vue3 + Vue-PDF 实现 Vue 版本的 PDF 文件在线预览功能. 我们先来看看完成后效果 正文 创建 vue3 项目 我们先创建一个的 Vue3 项目, 在终端中输入命令 pnpm create vite vue-pdf-preview 选择 vue-ts 回车,cd 进入项目根目录,执行 pnpm

  • java通过jacob实现office在线预览功能

    简介: 这篇文章中的代码都是参考于网上的,只做一个记录.主要做的就是实现一个office在线预览功能. 第一步:装office 第二步:下载jacob 打开网址下载,目前最新的是1.19版本. 第三步:配置jdk 解压下载完的jacob压缩包,根据jdk的版本选择dll中的一个,放入/jdk/jre/bin中. 第四步:在项目中引入jar包 在maven官网上找不到com.jacob的jar包,只能手动引入,这个jar包在jacob的压缩包中有. <dependency> <groupI

  • SpringBoot实现文件在线预览功能的全过程

    SpringBoot实现文件在线预览功能的全过程

    目录 背景 系统设计 文件类型及方案 流程设计 系统实现 识别文件后缀 文件解析 系统效果 使用方法 项目源码地址 预览界面 总结 背景 最近公司内部oa系统升级,需要增加文件在线预览服务,最常见的文件就是office文档,一开始构思几个方案,比如office软件自带的文件转换,openoffice转换,offce365服务,aspose组件转换,最终采用了aspose转换,原因是组件功能完善,不依赖其它软件安装环境 系统设计 文件类型及方案 文件类型 预览方案 word aspsoe-word

  • ASP.NET实现word文档在线预览功能代码

    于是考虑在每个文件上传时为其生存一份HTMl文件,这样就能实现在线预览功能.主要代码如下 复制代码 代码如下: using System; using System.Collections; using System.Configuration; using System.Data; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using S

  • asp.net实现word文档在线预览功能的方法

    asp.net实现word文档在线预览功能的方法

    本文实例讲述了asp.net实现word文档在线预览功能的方法.分享给大家供大家参考.具体实现方法如下: 实现方式:office文档转html,再在浏览器里面在线浏览 1.首先引入com组件中office库,然后在程序集扩展中引入word的dll 2.将Microsoft.Office.Interop.Word的嵌入互操作类型设置为 false,如图 3.主要代码: 复制代码 代码如下: using System; using System.Collections.Generic; using

  • Java实现办公文档在线预览功能

    Java实现办公文档在线预览功能

    java实现办公文件在线预览功能是一个大家在工作中也许会遇到的需求,网上些公司专门提供这样的服务,不过需要收费 如果想要免费的,可以用openoffice,实现原理就是: 通过第三方工具openoffice,将word.excel.ppt.txt等文件转换为pdf文件流: 当然如果装了Adobe Reader XI,那把pdf直接拖到浏览器页面就可以直接打开预览,前提就是浏览器支持pdf文件浏览. 我这里介绍通过poi实现word.excel.ppt转pdf流,这样就可以在浏览器上实现预览了.

  • vue实现pdf文档在线预览功能

    vue实现pdf文档在线预览功能

    针对android系统不支持pdf文档在线预览,可通过引入pdf.js插件实现,其具体实现步骤如下 一.引入插件 方式一:npm install --save pdfjs-dist,安装完成后在vue项目的node_modules出现如下依赖 方式二:只引入pdf.js的核心文件pdf.js和pdf.work.js,其他无关的文件全部删除,如图 方式三:将插件直接放在static文件夹下,如图 二.前端页面代码 方式一和方式二:特点精简 <template> <div> <c

随机推荐