关于使用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