Vue項目從無到有的部署上Github Pages
知乎
個人博客
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
ode_global"
npm config set cache "E:Program Files (x86)Nodejs
ode_cache"
你需要替換你的安裝目錄
- Vue-cli安裝
npm run -g vue
vue -V
- 創建
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 [email protected]: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/，可以看到部署上線的效果（這個倉庫我會在演示完後刪掉，請自行測試）
推薦閱讀：
