脚本宝典收集整理的这篇文章主要介绍了Vue项目从无到有的部署上Github page，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

知乎

个人博客

Github

准备工作

• Nodejs安装

Node官网下载

建议安装在非系统盘的英文目录下

Node环境配置

新建文件夹 --- node_cache 和 node_global(npm install -g package-name)

创建完文件后，需要更改 npmrc 中的 perfix 和 cache

npm config set prefix "E:Program Files (x86)Nodejsnode_global"
npm config set cache "E:Program Files (x86)Nodejsnode_cache"

你需要替换你的安装目录

• Vue-cli安装

npm run -g vue
vue -V

1. 创建Vue项目

vue init webpack project-name

1. 修改Vue项目配置

config/index.js --> build --> assetsPublicPath --> / --> ./

build/webpack.prod.conf.js --> new HtmlWebpackPlugin --> removeAttributeQuotes --> true --> false
.gitignore --> 注释/dist/

1. 项目打包

    npm run build 

1. 项目测试

在使用http-server前，需要安装 npm i -g http-server
http-server ./dist

1. 创建Github项目

1. 本地Vue项目Push到Github官网

git init

git add .

git commit -m 'init vue project'

git remote add origin git@github.com:Rain120/demo.git

git pull origin master --allow-unrelated-histories

git push -u origin master

    
![git init](https://user-gold-cdn.xitu.io/2018/10/19/1668ceb04fdd8a9e?w=685&h=50&f=png&s=9575)

![git add .](https://user-gold-cdn.xitu.io/2018/10/19/1668ced534ba145c?w=1016&h=742&f=png&s=156122)

![git commit -m 'init vue project'](https://user-gold-cdn.xitu.io/2018/10/19/1668cee33ad5485a)

![git pull && git push](https://user-gold-cdn.xitu.io/2018/10/19/1668cf142646bffa?w=835&h=636&f=png&s=91771)
7. `Github Setting` -- 配置`Github page`

Settings
![Settings](https://user-gold-cdn.xitu.io/2018/10/19/1668ccb537300271?w=1265&h=567&f=png&s=73363)
Github Pages
![Github Pages](https://user-gold-cdn.xitu.io/2018/10/19/1668ccba505d40f0?w=1109&h=558&f=png&s=58842)
Save Setting
![Save Setting](https://user-gold-cdn.xitu.io/2018/10/19/1668ccbff2c2c1c2?w=1214&h=680&f=png&s=73071)

脚本宝典总结

以上是脚本宝典为你收集整理的Vue项目从无到有的部署上Github page全部内容，希望文章能够帮你解决Vue项目从无到有的部署上Github page所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。