什么是 GitLab Pages
官方介紹 https://about.gitlab.com/features/pages/
進(jìn)行項(xiàng)目部署
首先得去 GitLab 官網(wǎng)注冊(cè)一個(gè)賬號(hào)
使用 vue-cli 初始化一個(gè) vue 項(xiàng)目寓涨，這里叫 vue-cli-project-template ,上傳 vue 項(xiàng)目代碼
-
由于 GitLab 官網(wǎng)免費(fèi)提供了 GitLab-Runner https://docs.gitlab.com/runner/ 拌牲，直接在項(xiàng)目根目錄下配置
.gitlab-ci.yml文件就可以了pages: image: node:8.11.1 script: - "npm install" - "npm run build" - "cp public/index.html public/404.html" cache: paths: - node_modules/ artifacts: paths: - public only: - masterimage表示 GitLab-Runner 運(yùn)行使用的鏡像環(huán)境，這里使用 node 8.11.1script表示自動(dòng)部署執(zhí)行的腳本-
npm install安裝前端項(xiàng)目依賴包 -
npm run build前端項(xiàng)目打包 -
cp public/index.html public/404.html表示如果頁(yè)面 404 跳轉(zhuǎn)到 index.html 頁(yè)面，這個(gè)針對(duì) vue 這種單頁(yè)應(yīng)用宿饱，不然 vue 路由頁(yè)面刷新會(huì)顯示 404
cache設(shè)置緩存目錄artifacts設(shè)置paths參數(shù)為public搭建 pages 必須滿足的配置條件:
- 所有靜態(tài)文件必須放到
public目錄下 -
.gitlab-ci.yml文件必須配置artifacts的paths為public
-
-
這個(gè)時(shí)候項(xiàng)目中的生成的靜態(tài)文件默認(rèn)是
dist文件夾，這里需要調(diào)整成public才能正確訪問 pages 生成的網(wǎng)站鏈接脚祟，修改config/index.js文件的中的build配置谬以，改成如下效果build: { // Template for index.html index: path.resolve(__dirname, '../public/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../public'), assetsSubDirectory: 'static', assetsPublicPath: '/vue-cli-project-template/', ... }?
打開項(xiàng)目的 Pages 選項(xiàng)后，會(huì)有一個(gè)鏈接由桌，點(diǎn)擊鏈接就可以訪問前端項(xiàng)目了 https://qingyi.gitlab.io/vue-cli-project-template
打開鏈接出現(xiàn)下面效果就表示 vue 項(xiàng)目通過 pages 服務(wù)發(fā)布成功了
GitLab version：GitLab Enterprise Edition 10.7.0-rc4-ee
vue-cli version： 2.9.3
有任何疑問歡迎留言交流 ^ - ^
