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 [email protected]: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)