【Vuejs】2023- Vue3 项目前端 CI/CD 体验-技术圈

作者：PAXTONX

1. 环境准备

➜  app-cicd node --version
v18.0.0
➜  app-cicd npm --version
9.6.6

2. 安装

2.1 初始化选项

项目初始化选择。

➜  app-cicd npm init vue@latest

Vue.js - The Progressive JavaScript Framework

✔ Project name: … app-cicd
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in /Users/UserName/GitLabProjects/app-cicd...

Done. Now run:

  cd app-cicd
  npm install
  npm run format
  npm run dev

2.2 项目运行

按照命令行指示 npm run dev。

➜  app-cicd npm run dev

> app-cicd@0.0.0 dev
> vite

  VITE v4.3.5  ready in 1161 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
✘ [ERROR] Could not resolve "vue-demi"

    node_modules/pinia/dist/pinia.mjs:6:206:
      6 │ import { getCurrentInstance, inject, toRaw, watch, unref, markRaw, effectScope, ref, isVue2, isRef, isReactive, set, getCurrentScope, onScopeDispose, reactive, toRef, del, nextTick, computed, toRefs } from 'vue-demi';
        ╵                                                                                                                                                                                                               ~~~~~~~~~~

  You can mark the path "vue-demi" as external to exclude it from the bundle, which will remove this
  error.

出现以上错误修改，结合 vue-demi 配置说明^[1] ，修改 package-lock.json，找到 vue-demi

"dependencies": {
  "@vue/devtools-api": "^6.5.0",
  "vue-demi": "latest" # “*” 改为 “latest”
},
"funding": {
  "url": "https://github.com/sponsors/posva"
},
"peerDependencies": {
  "@vue/composition-api": "^1.4.0",
  "typescript": ">=4.4.4",
  "vue": "^2.6.14 || ^3.2.0"
},
"peerDependenciesMeta": {
  "@vue/composition-api": {
    "optional": true
  },
  "typescript": {
    "optional": true
  }
},
# 新增配置
"devDependencies": {
  "vue": "^3.0.0"
}

再 npm run dev ，成功！

➜  app-cicd npm run dev

> app-cicd@0.0.0 dev
> vite
VITE v4.3.5  ready in 296 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

浏览器访问 http://localhost:5173/^[2]

3. 项目构建

因为要测试我们自己的网页，小小 build 一下。

➜  app-cicd npm run build

> app-cicd@0.0.0 build
> run-p type-check build-only

> app-cicd@0.0.0 build-only
> vite build

> app-cicd@0.0.0 type-check
> vue-tsc --noEmit -p tsconfig.vitest.json --composite false

vite v4.3.5 building for production...
✓ 39 modules transformed.
dist/assets/logo-277e0e97.svg        0.28 kB │ gzip:  0.20 kB
dist/index.html                      0.42 kB │ gzip:  0.28 kB
dist/assets/AboutView-4d995ba2.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-4646de73.css       3.14 kB │ gzip:  1.08 kB
dist/assets/AboutView-b87b23ac.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-f6d09a3d.js       76.05 kB │ gzip: 30.49 kB
✓ built in 586ms
node_modules/@types/node/fs/promises.d.ts:199:52 - error TS1010: 

199          * device. The specific implementation is o

Found 1 error in node_modules/@types/node/fs/promises.d.ts:199

ERROR: "type-check" exited with 2.

出现以上错误，按照提示，仔细查看发现注释符号未闭合。npm install --save @types/node 一下，再次 npm run build ，成功构建。

➜  app-cicd npm install --save @types/node
npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/
npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/

changed 1 package in 8s

111 packages are looking for funding
  run `npm fund` for details
➜  app-cicd npm run build

> app-cicd@0.0.0 build
> run-p type-check build-only

> app-cicd@0.0.0 build-only
> vite build

> app-cicd@0.0.0 type-check
> vue-tsc --noEmit -p tsconfig.vitest.json --composite false

vite v4.3.5 building for production...
✓ 39 modules transformed.
dist/assets/logo-277e0e97.svg        0.28 kB │ gzip:  0.20 kB
dist/index.html                      0.42 kB │ gzip:  0.28 kB
dist/assets/AboutView-4d995ba2.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-4646de73.css       3.14 kB │ gzip:  1.08 kB
dist/assets/AboutView-b87b23ac.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-f6d09a3d.js       76.05 kB │ gzip: 30.49 kB
✓ built in 578ms

4. 创建 Jenkinsfile

创建 Jenkinsfile 用于 Jenkins 流水线构建。

pipeline {
    agent any
    
    options {
        buildDiscarder(logRotator(numToKeepStr: '5'))
    }

    stages {
      stage('Init') {
            steps {
              script {
                checkout scmGit(
                  branches: [[name: 'master']],
                  userRemoteConfigs: [[credentialsId: 'ab8e0508-a9f3-4ff3-aa18-0afc27a4df08',url: 'http://192.168.2.159:9080/web/app-cicd.git']])
                sh 'pwd && ls -l'
              }
                // 
            }
        }
        
        stage('Build') {
            steps {
              script {
                echo "Build project"
                sh 'node --version && npm --version'
                sh 'npm install'
                sh 'npm run build'
                sh 'ls -l'
              }
            }
        }

        stage('Test') {
            steps {
              script {
                echo "Test project"
              }
            }
        }

        stage('Deploy') { 
            steps {
              script {
                echo "Deploy project"
                if(fileExists('/Users/username/apps/app-cicd')) {
                  sh 'rm -rf /Users/username/apps/app-cicd'
                }
                echo "Deploy project inited"
                sh 'mv dist/ /Users/username/apps/app-cicd'
                sh 'ls /Users/username/apps/app-cicd'
                echo "Deploy project finished"
              }
            }
        }
    }
}

整体目录结构。

➜  app-cicd git:(master) ls -l
total 368
-rw-r--r--    1 paxtonx  staff    1432  5 13 11:26 Jenkinsfile
-rw-r--r--    1 paxtonx  staff    1763  5 12 23:56 README.md
drwxr-xr-x    5 paxtonx  staff     160  5 13 02:39 dist
-rw-r--r--    1 paxtonx  staff      38  5 12 23:56 env.d.ts
-rw-r--r--    1 paxtonx  staff     331  5 12 23:56 index.html
drwxr-xr-x  335 paxtonx  staff   10720  5 13 00:44 node_modules
-rw-r--r--    1 paxtonx  staff  140945  5 13 02:39 package-lock.json
-rw-r--r--    1 paxtonx  staff    1196  5 13 02:39 package.json
drwxr-xr-x    3 paxtonx  staff      96  5 12 23:56 public
drwxr-xr-x    9 paxtonx  staff     288  5 12 23:56 src
-rw-r--r--    1 paxtonx  staff     281  5 13 02:16 tsconfig.app.json
-rw-r--r--    1 paxtonx  staff     332  5 13 02:37 tsconfig.json
-rw-r--r--    1 paxtonx  staff     241  5 13 02:15 tsconfig.node.json
-rw-r--r--    1 paxtonx  staff     153  5 13 02:16 tsconfig.vitest.json
-rw-r--r--    1 paxtonx  staff     355  5 13 02:18 vite.config.ts
-rw-r--r--    1 paxtonx  staff     400  5 12 23:56 vitest.config.ts

5. 结语

将此项目推送到远程 GitLab 仓库中，备用。这里介绍了 Vue3 的一些基本使用，如项目安装、构建，然后介绍了 Jenkinsfile 的编写。时间关系呢，过程较为省略。毕竟大佬说 "Talk is cheap. Show me the code." - Linus Torvalds

6. 参考资料

www.jenkins.io/zh/doc/book…^[3]

plugins.jenkins.io/git/#plugin…^[4]

plugins.jenkins.io/nodejs/^[5]