vue-cli 3.0 不同环境打不同的包(开发/生产 环境)

1

实际开发项目当中,项目管理体系的完整程度对于开发工程师来说非常的重要:

上周开发一个基于 vue 技术栈 的项目,需要开发和生产环境各自打包,便于测试工程师做测试环节的相关测试。
那这样,我们就来捋一捋

  1. 搭建脚手架开发环境

    • 对于一个前端开发者来说,这一点不是什么难事(这里就不做创建说明)
  2. 根目录创建相应配置文件:

    • .env.development:配置开发环境及测试服务器接口 url

      图片描述

    • .env.production: 配置线上服务器接口 url
      图片描述
  3. 根目录创建 vue.config.js,配置 outputDir

    • 如图:
      图片描述
  4. package.json ——> scripts 中配置运行指令 devbuild

    • "devbuild": "vue-cli-service build --mode development"

      图片描述

  5. 到这里我们就已经完成的基本的配置

    • 当然修改了脚手架的核心配置,记得 npm run serve 重启服务器 !!!
    • 试着执行 npm run build / npm run devbuild,看看我们的文件根目录有什么变化
      图片描述

      到这里你会看到 devdist(开发环境包) 和 dist(生成环境包)
      是时候给测试工程师展现一波了 哈哈哈
      今天不知道怎么的的,排版调节不好,望各位理解一下 !

你可能感兴趣的

载入中...