专栏首页达摩兵的技术空间vue-spa项目在github实现配置展示

vue-spa项目在github实现配置展示

前言

也许你肯定熟悉github-page ,并知道github支持自定义域名,前提是你新建了这样的一个同名git项目,名称是你的git用户名 ,格式是这样的name.github.io,然后可以通过name.github.io/proname访问到其他的项目。

也许你也很熟悉vue可以实现单页应用,那么是否可以这样,我把vue单页应用打包后的资源直接丢到项目上,这样地址就变成了我单页应用展示的地址。答案是肯定的。

建议阅读对象:对github pages不熟悉,以及前端比较小白的童鞋。 建议阅读时间: 10-15min

操作步骤

更改项目为github pages

找到项目设置tab项里对应github pages部分改为下图所示。需要做的有:设置展示的分支,主题可以不选,然后如果你有域名可以直接这里写你绑定的自己的域名,相当于在项目根目录下添加了一个CNAME ,内容就是你的域名,不带协议的。

用vue-cli脚手架初始化你的项目

利用vue-cli脚手架,把你的项目进行初始化,初始化之后你的项目就可以通过localhost:8080访问:具体过程不再赘述。

备注:如果你遇到了启动失败,是关于localhost的,那么你需要设置本机的host解析: 127.0.0.1 localhost.

更改项目里的设置

我们知道这个脚手架默认是把打包后的资源丢到dist文件夹的,而dist文件夹是在.gitignore中忽略的,所以我们需要做以下的操作:

  • dist资源需要上传,方便demo的展示 找到根目录.gitignore部分,吧忽略的dist目录删除,这样打包的dist文件就可以被推送了。
  • 模板的index页面移动到src中 直接复制过去就好了,同时我们需要修改以下的几个位置,因为目前我们就简单考虑dev和prod环境,所以只更改这两个部分的配置。 在build/webpack.dev.conf.js中,找到 HtmlWebpackPlugin的插件配置,其原来template模板本部分配置的是index.html,我们现在需要改为src/index.html new HtmlWebpackPlugin({ filename: 'index.html', template: 'src/index.html', inject: true }), 同理,在build/webpack.prod.conf.js中,找到 HtmlWebpackPlugin的插件配置,其原来template模板本部分配置的是index.html,我们现在需要改为src/index.html,与以上相同,这个是改的打包时候的配置。
  • 然后还需要纠正打包之后index.html文件的存放位置以及对应资源的加载路径,这部分在config/index.js中build对象的配置下。 打包后的index.html放到根目录,资源部分还在dist中,对应的字段为index,对照原来的,我们需要把打包后的文件放到../index.html文件中,也就是根目录,不是原来的../dist/index.html,并且资源assetsPublicPath字段还要统一加前缀,/dist/,原来是/,因为index.html与资源的相对关系发生改变了。 // Template for index.html index: path.resolve(__dirname, '../index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/dist/',

代码推送

将你本地的代码推送到github,然后通过name.github.io/proname 就可以看到你的单页应用了。

总结

本文非常水,只是教大家进行一些配置以及让你的vue单页应用支持更好的展示而不用买服务器,提供给小白少走弯路。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 固定宽高比例盒模型实现方案

    常规布局中,我们经常会遇到百分比布局的方式,也经常会遇到宽度与高度都设置百分比的情况,但高度值我们一般很少用百分比。尤其在百分比布局中,可能很多布局你是宽度百分...

    RobinsonZhang
  • 管理方式之差异化管理

    相信大家都了解过一点管理方式的常识,本文将总结在研究生课程中的一些课堂笔记进行分析和记录。希望能给一些初级管理和一些对管理有兴趣的同学一些有益的启示。

    RobinsonZhang
  • 经典面试题:数组去重

    RobinsonZhang
  • 微信小程序从零开始开发步骤(四)自定义分享的功能

    祈澈菇凉
  • 比DGL快14倍:PyTorch图神经网络库PyG上线了

    项目链接:https://github.com/rusty1s/pytorch_geometric

    机器之心
  • 比DGL快14倍:PyTorch图神经网络库PyG上线了

    项目链接:https://github.com/rusty1s/pytorch_geometric

    刀刀老高
  • FATAL:cache lookup failed for access method

    忽而呀嘿
  • 自定义socket 模拟B/S服务端

    这是我们用socket模拟,基于BS框架下的 server端与browser端的交互,对于真实开发中的python web程序来说, 一般会分为两部分:服务器程...

    郭楷丰
  • 前端事件处理函数的形参名必须为某个硬编码值的怪事

    Angular通过ng-click directive注册event handler,经过测试发现形参名必须为$index, 改成其他任意值都不工作。不工作的意...

    Jerry Wang
  • (九) 初遇python甚是喜爱之Modules模块操作

    各位读者大大们大家好,今天学习python的Modules模块操作,并记录学习过程欢迎大家一起交流分享。

    亚乐记

扫码关注云+社区

领取腾讯云代金券