关于使用webstorm等IDE开发的VUE项目在github中通过gitpages预览

大家一般都把项目托管到github上,那把vue项目托管到github上怎么预览呢?我看到网上好多都是直接用git写命令行代码执行,用webstorm等IDE开发的开发者可能一脸懵逼。那用IDE开发的vue项目怎么做呢?

1.修改文件属性

  • config/index.js 里边 build 配置里边的 assetsPublicPath: '/' 改成 assetsPublicPath: './'
  • 将 webpack.prod.conf.js 中的 removeAttributeQuotes 改为 false

2.npm run build

webstorm的terminal中输入npm run build,运行完毕之后,就会发现项目中多了一个dist文件夹。里面的index.html打开其实就可以看到你做的这个网页了,另外一个是集成的数据包。

3.安装git桌面版

这个是必须的,要不然系统不能识别git指令,关于安装的,可以参考 [安装Git - 廖雪峰的官方网站(https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137396287703354d8c6c01c904c7d9ff056ae23da865a000)

4.新建一个gh-pages空分支并push dist文件夹到这个分支

在项目文件夹下打开windows命令行输入工具(因为安装git的时候我选的是第二项,用windows 命令行工具写指令)依次输入:

$ git checkout -b gh-pages
$ git add -f dist
$ git commit -m 'create project'
$ git subtree push --prefix dist origin gh-pages

就可以在你的github上看到这个项目出现了一个新分支gh-pages,在setting里面设置一下gitpages并且指向这个分支,就能看到预览效果了。

提供一个我的小项目地址给大家参考一下,readme里面就有一个链接,就是这个项目的预览
项目地址: https://github.com/fredfeng0326/inputsearch

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容