vue前端静态页面Github Pages线上预览实现
一、前期准备之项目编译
此处记录如何解决vue2.0 打包之后,打开index.html出现空白页的问题,附上@参考地址
- 打包之前修改三个文件
- 第一步,找到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错误
然后你就可以 build 了,
如果 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线上预览实现的更多相关文章
- beego-vue URL重定向(beego和vue前后端分离开发,beego承载vue前端分离页面部署)
具体过程就不说,是搞这个的自然会动,只把关键代码贴出来. beego和vue前后端分离开发,beego承载vue前端分离页面部署 // landv.cnblogs.com //没有授权转载我的内容,再 ...
- github上预览Demo网页最简单的方法
github上预览Demo网页最简单的方法: 1.打开你github上demo网页index.html,效果如图 2.复制上面的页面地址,然后在该地址前加上 htmlpreview.github.co ...
- 手机QQ访问时,html页面在QQ中自定义预览和自定义分享
手机QQ访问时,html页面在QQ中自定义预览和自定义分享 有一天,产品说要做个自定义预览和分享功能,于是很快在微信上实现了,可是不知道在QQ上怎么实现,查看了很多网站,最后才找到了解决方案,于是想和 ...
- File控件选择图片的时候在Html5下马上预览
页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;heig ...
- 使用 gulp-file-include 构建前端静态页面
前言 虽然现在单页面很流行,但是在 PC 端多页面还是常态,所以构建静态页面的工具还有用武之地.最近也看到了一些询问如何 include HTML 文件的问题. 很多时候我们在写静态页面的时候也希望能 ...
- Web前端静态页面示例
目录结构: Web25\ |—css\ reset.css.common.css.index.css.login.css.reg.css |—js\ jquery-3.3.1.js.index.js. ...
- H5商城,纯前端静态页面
发布时间:2018-09-28 技术:jquery1.10.1+swipeSlide+jquery.mmenu+jquery.touchSwipe+cityinit 概述 纯手写H5商城,2年 ...
- 前端开发流程之(线上)绝对地址(图片+css+js)
重要提醒:前端写完-----发邮件通知项目组 1:写好的前段资源包上传到SVN上之后,相关的图片.CSS.js文件要换成线上地址给后台开发. 2:图片-----压缩(https://tinypng.c ...
- 使用Git GUI,上传项目到github,并实现预览功能
一.使用GUI,上传项目到GitHub (GUI是啥,不做过多赘述,可百度了解) 步骤: 1.打开GUI,新建一个仓库,demo 2.在编辑器中,编写相关代码,比如添加1.html文件,文件内容为“h ...
随机推荐
- 删除指定路径下指定天数之前(以文件的最后修改日期为准)的文件:BAT + VBS
代码如下: @echo off ::演示:删除指定路径下指定天数之前(以文件的最后修改日期为准)的文件. ::如果演示结果无误,把del前面的echo去掉,即可实现真正删除. ::本例调用了临时VBS ...
- 【快速因数分解】Pollard's Rho 算法
Pollard-Rho 是一个很神奇的算法,用于在 $O(n^{\frac{1}4}) $的期望时间复杂度内计算合数 n 的某个非平凡因子(除了1和它本身以外能整除它的数).事书上给出的复杂度是 \( ...
- P6773 [NOI2020]命运
整体DP 很明显计算答案需要用容斥计算,如果暴力容斥的话,就是枚举哪些路径不符合条件,在这些路径的并集中的边都不能取,其他边任意取,设当前取了$i$条路径,那么对答案的贡献是$(-1)^i2^{n-1 ...
- js &&与||的妙用
&&表达式中,若前一个为false则不会执行下去,||表达式中,一直寻找到true即停止 例:成长速度为5显示1个箭头,为10显示2个箭头,为 15显示3个箭头,其余显示0个箭头var ...
- (4)ASP.NET Core3.1 Ocelot负载均衡
1.负载均衡 Ocelot可以在每个路由的可用下游服务中实现负载均衡,这使我们更有效地选择下游服务来处理请求.负载均衡类型:●LeastConnection:根据服务正在处理请求量的情况来决定哪个服务 ...
- 解决js中对象中属性是数组中对应元素,不能使用点数组元素(.数组[i])来获取value值来循环,属性不能是数组元素array[i]的问题
数据类型 //示例 var tags1avg= ['rg2_crt_001_001_avg', 'rg2_crt_001_002_avg', 'rg2_crt_001_003_avg', 'rg2_c ...
- Jmeter-全局变量跨线程组使用
一.前言 前面讲了如何使用正则表达式提取值,一般提取的值在同一个线程里,随意哪个请求都是可以引用的,那如果别的线程组也想引用怎么办呢?这时就涉及到一个全局变量的知识点了,话不多说,直接实例走起. 二. ...
- 论文阅读:Learning Attention-based Embeddings for Relation Prediction in Knowledge Graphs(2019 ACL)
基于Attention的知识图谱关系预测 论文地址 Abstract 关于知识库完成的研究(也称为关系预测)的任务越来越受关注.多项最新研究表明,基于卷积神经网络(CNN)的模型会生成更丰富,更具表达 ...
- 激情的来源 Imagine how much you love it !
激情来自哪里?我想可能我找到了,精髓就在那个标题! 想象你有多么爱它!你就会爱上他,想象你有多么喜欢某一个东西,你很有可能就喜欢上他,着手去了解他,接触他. 如果带着这种想象状态的激情,工作和学习会有 ...
- 判断浏览器,还在用userAgent吗,你out了
以下内容摘自http://www.cnblogs.com/rubylouvre/archive/2009/10/14/1583362.html //2010 4 16日更新 ie678 = !+&qu ...