基于 Vue-cli 3x的项目部署

以前在vue项目发布部署过程当中，把流程梳理下来，作个小分享。

项目中涉及使用了 vue-cli 3x脚手架、自动化部署工具jenkins、nginx等。

作这个分享目的也是想帮不清晰部署的前端小伙伴们 👬 作个简单的梳理。

首先咱们先讲下 Vue-cli 的配置。

Vue-cli

• package.json的配置

"scripts": {
    "serve": "vue-cli-service serve ",
    "build": "vue-cli-service build",
    "build_development": "vue-cli-service build --mode development",
    "build_test": "vue-cli-service build --mode test",
    "build_preproduction": "vue-cli-service build --mode preproduction",
    "build_production": "vue-cli-service build --mode production",
    "unit": "jest --config src/test/unit/jest.conf.js --coverage",
  },
复制代码

本地开发环境中咱们使用 npm run serve，可是当咱们要部署到线上时，就须要使用npm run build,在生产环境、测试环境生成代码及静态资源等。

举个例子：咱们看到 生产环境模式 build_production 与 测试环境模式 build_test 的区别就是后面中的 “ -- mode ”

• mode的配置

在产品开发过程当中，通常须要通过本地开发、测试脚本、测试环境、预上线环境，最后才能到生产环境发布，每一个环境也存在不一样的配置，好比接口地址、基础配置等等，这个时候就须要咱们配置不一样的参数，这个时候就须要用到 mode 来指定咱们使用的模式，来管理环境变量

项目目录中会经过添加.env文件增长后缀来设置某个模式下特有的环境变量,不一样环境模式结尾的文件来匹配执行mode时所要映射的文件，如上图所示 🏆

简单的理解就是 你执行npm run build_test时，设置的环境变量就是从.env.test 中获取，建立也是依照.env.[mode]来命名

• env文件写法

咱们看下env文件的配置如何编写

NODE_ENV = 'test'
VUE_APP_URL = http://test.com/gateway/api
复制代码

可在env文件中配置api请求路径，环境参数，基本配置等等

• env中环境变量的使用

1. src目录中，必须以VUE_APP_开头。调用方式为 process.env.VUE_APP_SECRET

2. index中的使用  如：`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">`
复制代码

Jenkins

主要分享下jenkins上的配置

• Source Code Management

首先是代码仓库的配置

• Build Triggers

选择build的触发模式，默认是手动触发，支持代码触发构建和定时构建

• build 命令

选择执行的脚本命令

• Post-build Actions

主要是用于多节点时须要远程，用于集群部署 可添加多台机器远程访问，将build后打包的资源上传到多个节点更新资源

以上是jenkins上前端项目的配置部署 🚀