前言

大多數(shù)人只知道github是開源社區(qū)，可以用來做項(xiàng)目的版本管理，但是其實(shí)他還有一些其他功能和小彩蛋。有沒有和我一樣不想花錢去購置服務(wù)器的，對，我窮。還記得當(dāng)初用大學(xué)生的身份騰訊云買的一元云主機(jī)，甚是懷念鴨????。如果你也是暫時只有前端應(yīng)用需要部署的話，github其實(shí)就可以幫你，非常方便，只是可能因?yàn)槟承┎豢傻挚乖?，加載比較慢，這里你懂得~~

直接上手搞

先整出一個項(xiàng)目，為了貼合實(shí)際應(yīng)用場景，我這里用的是vue項(xiàng)目，用我自己寫的腳手架vue2-admin-cli——順便打個廣告????，創(chuàng)建一個vue-admin項(xiàng)目出來。

// 全局安裝腳手架
npm install -g vue2-admin-cli
# or
yarn global add vue2-admin-cli
// 創(chuàng)建項(xiàng)目
vue2-admin-cli init <project_name> 
// yarn 安裝依賴(國內(nèi)建議增加淘寶鏡像源，不然很慢，你懂的 ??) `yarn`
yarn serve //啟動

項(xiàng)目呈現(xiàn)效果

打包

接下來打包，執(zhí)行yarn build:prod生產(chǎn)環(huán)境壓縮編譯

package.json
"scripts": {
    "serve": "vue-cli-service serve --port 80 --open",
    "build": "vue-cli-service build",
    "build:qa": "vue-cli-service build --mode qa",
    "build:pre": "vue-cli-service build --mode pre",
    "build:prod": "vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint",
    "inspect": "vue-cli-service inspect"
  }

dist目錄下已經(jīng)有編譯產(chǎn)物了

新建倉庫

新建一個倉庫用來放dist下的產(chǎn)物

到項(xiàng)目的setting下找到page

傻瓜式操作來了哈????????，選好分支和目錄點(diǎn)擊save，地址就生成了，多刷新幾次等待部署完成，默認(rèn)生成的地址的pathname里面會帶上你的project名稱

點(diǎn)進(jìn)去以后——白屏，打開network去看資源的請求，發(fā)現(xiàn)js和css的請求路徑全是有問題的

這樣才是正確的請求

@import url(//at.alicdn.com/t/font_3260005_gv26iyrvrw.css);#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50}#nav{padding:30px}#nav a{font-weight:700;color:#2c3e50}#nav a.router-link-exact-active{color:#42b983}.dashboard__header[data-v-0c009bf9]{padding:0 10px;background:#4e8de7;display:flex;align-items:center;justify-content:space-between}.dashboard__logo[data-v-0c009bf9]{width:60px;height:60px}.dashboard__info[data-v-0c009bf9]{display:flex;align-items:center}.dashboard__info .name[data-v-0c009bf9]{color:#fff;margin:0 10px}.dashboard__info .font[data-v-0c009bf9]{font-size:22px;cursor:pointer}.SubMenu__container a[data-v-88c88832]{text-decoration:none}.SubMenu__container[data-v-88c88832] .el-menu-item,.SubMenu__container[data-v-88c88832] .el-submenu__title{display:flex;align-items:center}[data-v-a909279a] .w-e-content-mantle{background:#f1f3f4}.background{background:url(https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF) no-repeat 50%/cover}

實(shí)際上的請求  file not found 404

有點(diǎn)部署項(xiàng)目經(jīng)驗(yàn)的都知道這里是打包編譯后的文件路徑配置有問題,于是我把vue.config.js里的publicPath從"/"(根目錄下)換成了"./"(當(dāng)前目錄下)，實(shí)際用服務(wù)器部署的時候可能還會把資源放到某個目錄下，publicPath需要和文件路徑對應(yīng)上，具體場景看下network的請求去調(diào)試即可??

module.exports = {
  publicPath: "./",
  devServer: {
    disableHostCheck: true, // 關(guān)閉host檢查
  },
};

重新推送編譯后的dist產(chǎn)物然后刷新page鏈接，資源請求正確，頁面成功加載

完結(jié)

這樣你也可以輕松的用github管理代碼以后順便給個預(yù)覽地址了

預(yù)覽地址 ???? （國內(nèi)網(wǎng)速慢的科學(xué)上網(wǎng)或者多刷新幾次）

以上就是使用github部署前端vue項(xiàng)目的詳細(xì)內(nèi)容，更多關(guān)于github部署前端vue項(xiàng)目的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論