gitlab部署vue项目

这篇文章是介绍如何在gitlab上部署vue项目 
1
2
3
4
5
6
7
序：
gitlab方便之处在于它可以帮你在服务器端进行软件的打包、发布，
我们无需在本地进行代码的压缩。
vue-ci脚手架生产的模版，如果想使用github pages，
我们需要在本地执行npm run build，将dist文件夹下的内容提交到远程仓库。
然而，gitlab就没有这个必要了。
示例网址：https://goddy.gitlab.io/vue-gitlab

1.本地使用vue-ci创建好模版项目

  • 官网教程

    2.在项目根目录新建.gitlab-ci.yml

  • $ touch .gitlab-ci.yml

    3.在.gitlab-ci.yml添加打包、部署的流程

  • 方法1:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    #build过程
    build:
      stage: build
      image: node:9.4.0
      cache:
        paths:
        - node_modules/
      script:
      - npm install
      - npm run build
      artifacts:
        paths:
        - dist
      only:
      - master

    #发布过程
    pages:
      stage: deploy
      image: alpine:latest
      script:
      - mkdir public
      - mv dist/* public
      artifacts:
        paths:
        - public
      only:
      - master

  • 方法2:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    #打包和发布一起执行
    image: node:9.4.0

    build:
      cache:
        paths:
        - node_modules/
      script:
      - npm install
      - npm run build
      - mkdir public
      - mv dist/* public
      artifacts:
        paths:
        - public
      only:
      - master

p.s. 值得注意的一点是，vue-ci创建的模版有一个缺陷，在config/idex.js文件里，module.exports的build模块中的assetsPublicPath应设置为相对路径’./‘。否则打包后的css及js可能找不到对应路径

Comentários

⬆︎TOP