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/
,可以看到部署上線的效果(這個倉庫我會在演示完後刪掉,請自行測試)
推薦閱讀: