前端项目之vue分环境打包

前端项目部署的环境每每是多环境的,最熟悉的例如:测试环境,生产环境。不一样的环境下每每api接口的域名地址是不一样的,那麽就会存在一个问题,不一样环境下项目打包部署前都须要咱们去手动更改域名地址,岂不是很麻烦,甚至会出现忘记更改或者关系搞反的状况,那怎么办呢?莫慌,今天就来唠唠vue分环境打包这些事。

vue-cli 2.x 分环境打包

• vue-cli 2.x版本分环境打包步骤能够猛戳这里.一位同事写的一篇关于vue-cli 2.x多环境下打包的文章,绝对是干货中的战斗机,因此就尽可能再也不重复造轮子,今天咱们仍是以vue-cli 3.0版本下的分环境打包方式为主。

vue-cli 3.0 分环境打包

• 首先仍是老规矩,能用代码说明的问题,毫不多bb一句,so,咱们就开始,直接上代码吧。
  1.package.json添加命令

"scripts": {
    "dev": "vue-cli-service serve", //本地运行，会把process.env.NODE_ENV的值设置为'development'(默认)
    "build:dev": "vue-cli-service build --mode dev",//dev模式下打包(测试服打包)，会把process.env.NODE_ENV的值设置为'.env.dev文件中NODE_ENV声明的值'
    "build": "vue-cli-service build"//正式服打包，会把process.env.NODE_ENV的值设置为'production'(默认)
  },

复制代码

注意:
       1.命令"build:dev"是能够自定义的,不是固定写法,例如你能够彻底声明成"build-dev"等任何其余字段.
       2.--mode '名称' 必须与如下步骤2中的.env.'名称' 的'模式名称'字段保持一致,这里是必须滴.

       2. 在项目根目录添加文件.env.'名称' 文件,我这里就是.env.dev文件

• 如下为.env.dev文件中定义的环境变量(分环境打包依赖于该自定义的环境变量来实现)

       3.多环境下的应用(以不一样生产环境下的api接口域名地址举例)

<!--request.js-->
let env = process.env.NODE_ENV === 'development' ? 'development': process.env.VUE_APP_TITLE;
const baseURL = (env === 'development' || env === 'build_dev') ? store.state.testURL : store.state.baseURL;
复制代码

       4.打包

npm run build:dev 测试服打包(package.json 中定义)
npm run build 正式服打包
复制代码

• 不一样打包命令下会加载其对应模式下的环境变量,这样咱们就经过改变process.env.NODE_ENV和process.env.VUE_APP_TITLE 区分打包环境,来实现分环境下项目打包.

notes

• 有几个值得关注的地方,在这里说明一哈
  1.vue-cli 3.0 多环境下打包主要得益于其对项目根目录下.env文件的支持,这部分能够戳这里查看官方文档,很详细,非常干货.

2. 步骤2.env文件中NODE_ENV环境变量的值能够是'development','production','test',在这里我将其定义为'production'是由于开webpack打包时针对process.env.NODE_ENV===''production''和其余状况打出来的包结构和大小都不同,这个有兴趣的小伙伴能够分别打包尝试下,就会一目了然.

至此vue-cli 3.0中项目分环境打包方式就基本完毕,如下是小弟思考的关于小程序实现相似于分环境动态切换接口域名的方案,能够讨论讨论,嘿嘿.

---------------------------------一条华丽的分割线---------------------------------

小程序分环境动态切换域名

• 小程序中__wxConfig.envVersion能够用来区分小程序体验版，开发板，正式版. envVersion 类型为字符串

  envVersion: 'develop', //开发版

  envVersion: 'trial', //体验版

  envVersion: 'release', //正式版

  这样咱们就能够变通的来实现小程序中动态切换域名,避免手动注释切换的方式.

  END

  不积跬步，无以致千里；不积小流，无以成江海。