一、前期准备之项目编译


此处记录如何解决vue2.0 打包之后,打开index.html出现空白页的问题,附上@参考地址

  1. 打包之前修改三个文件
  • 第一步,找到build文件,在webpack.prod.conf.js 第25行左右 有一个对象为 output,在这里面增加一行代码

    publicPath:'./'
  output: {
//在这里加一行代码
publicPath:'./', path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
  • 第二步,找到utils.js,在 第47行左右 有一个if判断为 if (options.extract),在这里面增加一行代码

说明:这个是保证加载背景图片等css样式资源不出现路径问题

publicPath:'../../'

    if (options.extract) {
return ExtractTextPlugin.extract({
publicPath:'../../',
use: loaders,
fallback: 'vue-style-loader'
})
}
  • 第三步,找到config/index.js第46行左右 修改assetsPublicPath 路径为 './';

注意:编译完成后,需要把它改回来,以便在编译器上跑,不然的话页面会出现Error错误

  1. 然后你就可以 build 了,

  2. 如果 build 完成后,在本地还是空白页,或者放到服务器上面还是是空白页怎么办

    这个就有可能是你的路由模式出现了问题,你给的路由模式可能是history 模式,如果设置这个模式的话需要后端的配合,设置一些参数的,所以如果没有后端的配合的话,就把这个路由的 mode 改为 hash 或者是直接删除,就是默认的模式了


二、git上传代码等常规操作


本模块度娘教的非常仔细,我当时参考的是@git上传代码到github入门学习和相关错误汇总


三、此处重点记录使用GitHub Pages实现线上预览功能

此处参考了@报错:Failed to load resource: the server responded with a status of 404 (),该博主的方案解决了我的问题

由于在GitHub Pages中,请求的是根目录下的index.html文件,而此index.html文件并非项目下index.html,而是编译后的dist文件夹下的index.html文件,若是直接部署项目到GitHub Pages上,则地址可读,但无法获取内容。

因此采用方法为上文链接中博主所叙述方法一:

在编译后,项目中文件均已整合到dist文件夹中,将dist文件夹单独使用git管理,并上传独立分支,以此为依托创建GitHub Pages。

vue前端静态页面Github Pages线上预览实现的更多相关文章

  1. beego-vue URL重定向(beego和vue前后端分离开发,beego承载vue前端分离页面部署)

    具体过程就不说,是搞这个的自然会动,只把关键代码贴出来. beego和vue前后端分离开发,beego承载vue前端分离页面部署 // landv.cnblogs.com //没有授权转载我的内容,再 ...

  2. github上预览Demo网页最简单的方法

    github上预览Demo网页最简单的方法: 1.打开你github上demo网页index.html,效果如图 2.复制上面的页面地址,然后在该地址前加上 htmlpreview.github.co ...

  3. 手机QQ访问时,html页面在QQ中自定义预览和自定义分享

    手机QQ访问时,html页面在QQ中自定义预览和自定义分享 有一天,产品说要做个自定义预览和分享功能,于是很快在微信上实现了,可是不知道在QQ上怎么实现,查看了很多网站,最后才找到了解决方案,于是想和 ...

  4. File控件选择图片的时候在Html5下马上预览

    页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;heig ...

  5. 使用 gulp-file-include 构建前端静态页面

    前言 虽然现在单页面很流行,但是在 PC 端多页面还是常态,所以构建静态页面的工具还有用武之地.最近也看到了一些询问如何 include HTML 文件的问题. 很多时候我们在写静态页面的时候也希望能 ...

  6. Web前端静态页面示例

    目录结构: Web25\ |—css\ reset.css.common.css.index.css.login.css.reg.css |—js\ jquery-3.3.1.js.index.js. ...

  7. H5商城,纯前端静态页面

    发布时间:2018-09-28   技术:jquery1.10.1+swipeSlide+jquery.mmenu+jquery.touchSwipe+cityinit   概述 纯手写H5商城,2年 ...

  8. 前端开发流程之(线上)绝对地址(图片+css+js)

    重要提醒:前端写完-----发邮件通知项目组 1:写好的前段资源包上传到SVN上之后,相关的图片.CSS.js文件要换成线上地址给后台开发. 2:图片-----压缩(https://tinypng.c ...

  9. 使用Git GUI,上传项目到github,并实现预览功能

    一.使用GUI,上传项目到GitHub (GUI是啥,不做过多赘述,可百度了解) 步骤: 1.打开GUI,新建一个仓库,demo 2.在编辑器中,编写相关代码,比如添加1.html文件,文件内容为“h ...

随机推荐

  1. 删除指定路径下指定天数之前(以文件的最后修改日期为准)的文件:BAT + VBS

    代码如下: @echo off ::演示:删除指定路径下指定天数之前(以文件的最后修改日期为准)的文件. ::如果演示结果无误,把del前面的echo去掉,即可实现真正删除. ::本例调用了临时VBS ...

  2. 【快速因数分解】Pollard's Rho 算法

    Pollard-Rho 是一个很神奇的算法,用于在 $O(n^{\frac{1}4}) $的期望时间复杂度内计算合数 n 的某个非平凡因子(除了1和它本身以外能整除它的数).事书上给出的复杂度是 \( ...

  3. P6773 [NOI2020]命运

    整体DP 很明显计算答案需要用容斥计算,如果暴力容斥的话,就是枚举哪些路径不符合条件,在这些路径的并集中的边都不能取,其他边任意取,设当前取了$i$条路径,那么对答案的贡献是$(-1)^i2^{n-1 ...

  4. js &&与||的妙用

    &&表达式中,若前一个为false则不会执行下去,||表达式中,一直寻找到true即停止 例:成长速度为5显示1个箭头,为10显示2个箭头,为 15显示3个箭头,其余显示0个箭头var ...

  5. (4)ASP.NET Core3.1 Ocelot负载均衡

    1.负载均衡 Ocelot可以在每个路由的可用下游服务中实现负载均衡,这使我们更有效地选择下游服务来处理请求.负载均衡类型:●LeastConnection:根据服务正在处理请求量的情况来决定哪个服务 ...

  6. 解决js中对象中属性是数组中对应元素,不能使用点数组元素(.数组[i])来获取value值来循环,属性不能是数组元素array[i]的问题

    数据类型 //示例 var tags1avg= ['rg2_crt_001_001_avg', 'rg2_crt_001_002_avg', 'rg2_crt_001_003_avg', 'rg2_c ...

  7. Jmeter-全局变量跨线程组使用

    一.前言 前面讲了如何使用正则表达式提取值,一般提取的值在同一个线程里,随意哪个请求都是可以引用的,那如果别的线程组也想引用怎么办呢?这时就涉及到一个全局变量的知识点了,话不多说,直接实例走起. 二. ...

  8. 论文阅读:Learning Attention-based Embeddings for Relation Prediction in Knowledge Graphs(2019 ACL)

    基于Attention的知识图谱关系预测 论文地址 Abstract 关于知识库完成的研究(也称为关系预测)的任务越来越受关注.多项最新研究表明,基于卷积神经网络(CNN)的模型会生成更丰富,更具表达 ...

  9. 激情的来源 Imagine how much you love it !

    激情来自哪里?我想可能我找到了,精髓就在那个标题! 想象你有多么爱它!你就会爱上他,想象你有多么喜欢某一个东西,你很有可能就喜欢上他,着手去了解他,接触他. 如果带着这种想象状态的激情,工作和学习会有 ...

  10. 判断浏览器,还在用userAgent吗,你out了

    以下内容摘自http://www.cnblogs.com/rubylouvre/archive/2009/10/14/1583362.html //2010 4 16日更新 ie678 = !+&qu ...