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)\Nodejs\node_global"
npm config set cache "E:\Program Files (x86)\Nodejs\node_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 [e-mail]: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)