gitlab部署vue项目

序：
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:

 #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:

#打包和发布一起执行
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可能找不到对应路径