前端项目之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.'名称' 的'模式名称'字段保持一致,这里是必须滴.

• 以下为.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中项目分环境打包方式就基本完毕,以下是小弟思考的关于小程序实现类似于分环境动态切换接口域名的方案,可以讨论讨论,嘿嘿.