[New Feature] Vue项目多环境打包解决方案

haitaodesign / vue-cli-base

基于Vue CLI 的企业级快速初始化项目模板

5 stars 1 forks source link

[New Feature] Vue项目多环境打包解决方案 #47

Open haitaodesign opened 5 years ago

haitaodesign commented 5 years ago

Vue-cli 环境变量与模式
webpack的mode配置
根据当前的CI/CD流程制定分环境打包的方案
通过cli插件的形式进行方案封装

haitaodesign commented 5 years ago

在项目根目录下创建存放环境变量的文件

# 开发环境变量，与测试环境变量一致
env.development  

 # 测试环境变量，对应Git的dev测试发布分支
env.dev                      

# 生产环境变量，对应master发布分支
env.prod

haitaodesign commented 5 years ago

在对应的文件里面写入需要的环境变量

开发环境 env.development

NODE_ENV=development
VUE_APP_BASE_URL=http://188.131.230.60:17000
VUE_APP_AUTH_URL=http://188.131.230.60:18000

测试环境 env.dev

NODE_ENV=production
VUE_APP_BASE_URL=http://188.131.230.60:17000
VUE_APP_AUTH_URL=http://188.131.230.60:18000

生产环境 env.prod
```
NODE_ENV=production
VUE_APP_BASE_URL=http://188.131.230.60:18002
VUE_APP_AUTH_URL=http://188.131.230.60:18000
```
1. NODE_ENV 为 webpack 打包时，需要使用哪种模式（mode）打包，详细的请参看webpack的mode配置
2. 环境变量必须以VUE_APP_开头，静态变量全部使用大写

haitaodesign commented 5 years ago

修改 package.json 文件里面的 scripts 命令

 "build:prod": "vue-cli-service build --mode prod",
 "build:dev": "vue-cli-service build --mode dev"

haitaodesign commented 5 years ago

在客户端侧使用环境变量

const { VUE_APP_BASE_URL, VUE_APP_AUTH_URL } = process.env
const service = Axios.create({
  baseURL: VUE_APP_BASE_URL + '/v1/'
})

console.log('当前环境地址：', VUE_APP_BASE_URL)

haitaodesign commented 5 years ago

持续部署工具drone.yml配置文件的修改

测试环境跟生产环境的打包命令是不同的，所以需要对drone的build命令进行区分

测试环境构建配置

build-dev:
    image: node:10.15.1-alpine
    commands:
      - yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
      - yarn run build:dev
    when:
      event: dev

生产环境构建配置

build-prod:
image: node:10.15.1-alpine
commands:
  - yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
  - yarn run build:prod
tags: ["${DRONE_TAG}"]
when:
  event: tag

haitaodesign commented 5 years ago

vue-cli-plguin-moor-env插件开发

插件使用流程

只关注环境变量配置文件的读写，其他相关文件可以暂时忽略