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
複製代碼

2. 修改 Vue項目配置

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

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

3. 項目打包

npm run build 
複製代碼

4. 項目測試

在使用http-server前，須要安裝 npm i -g http-server
http-server ./dist
複製代碼

5. 建立 Github項目

6. 本地 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
複製代碼

7. Github Setting -- 配置 Github page

Settings

Github Pages

Save Setting

最後能夠在 https://rain120.github.io/demo/dist/，能夠看到部署上線的效果（這個倉庫我會在演示完後刪掉，請自行測試）