阅读 966

基于 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上前端项目的配置部署 🚀