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