使用Jenkins自動部署vuejs項目

Jenkins&Git安裝

需要安裝jenkins和git（自行百度查看如何安裝jenkins和git），vue項目的打包工具使用Jenkins自帶的nodejs。

安裝Jenkins插件

登錄jenkins提供的可視化界面：

選擇安裝插件如下：(根據需求安裝)

• NodeJS

Jenkins配置

進入到Jenkins Global Configuration界面，配置使用的環境：

Git配置：(配置在服務器上安裝的位置)

NodeJS配置：
設定安裝的NodeJS的名稱，版本，勾選出自動安裝。

自動部署配置

新建Item

新建自由風格的項目：

配置源代碼

配置遠程倉庫地址以及登陸遠程倉庫的憑證：

構建觸發器

設定在何種情況下設定構建，定時或者設定對應倉庫的hook：

設定構建環境

設定NodeJS的安裝地址，我們使用的是，Jenkins自帶的NodeJS，版本:10.9.0：

構建命令

分步進行構建，具體構建命令如下：

1. node -v 顯示出當前nodejs的版本
2. node install -g yarn 安裝yarn（yarn比npm好用）
3. npm config set registry https://registry.npm.taobao.org --global
   npm config set disturl https://npm.taobao.org/dist --global 設定npm
4. yarn config set registry https://registry.npm.taobao.org --global
   yarn config set disturl https://npm.taobao.org/dist --global 設定yarn
5. yarn -v 查看yarn的版本
6. yarn install --pure-lockfile 安裝相關依賴
7. yarn run build 打包
   
   
   

部署

打包後的位置：Jenkins安裝目錄\workspace\項目名\dist

使用nginx部署vue項目，修改nginx.conf：

    server {
        listen       8089;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
        	// 默認打包的位置：
            root   D:\\CI\\xx\\xxx\\dist;
            index  index.html index.htm;
        }
  }