Vue-cli3.x 中使用cross-env配置项目变量

Vue-cli3.x 中使用 cross-env 配置不同环境下的项目变量

博主wx: -GuanEr-,加博主进前端交流群

在实际开发过程中,我们有时候需要在不同的环境、不同的服务器上运行我们的项目,或者项目测试环境有多个,这个时候我们就需要根据不同的环境配置不同的变量,让项目在不同的环境下都能正常使用。

一、安装插件

yarn add cross-env
或
npm i cross-env --save

二、修改配置 package.json

安装好 cross-env 之后,我们可以通过修改 package.json 中跟 build 有关的 scripts,来设置不同打包命令下的环境变量。

"scripts": {
  "serve": "vue-cli-service serve",
  "build:env1": "cross-env NODE_ENV=env1 vue-cli-service build",
  "build:env2": "cross-env NODE_ENV=env2 vue-cli-service build",
  "build:env3": "cross-env NODE_ENV=env3 vue-cli-service build",
  "lint": "vue-cli-service lint"
}

注:

  • vue-cli-service build 是打包命令对应的 JS 脚本,这里要根据你项目里的脚本保留这段配置,比如是自己写的打包脚本,那么这里就保留该脚本目录就好。
  • build:env1 冒号后面的条件可以根据项目情况自主设置,比如 build:testbuild:prod 等。

三、根据配置文件中的命令打包不同环境下的项目

3.1 运行 yarn build:env1

在这里插入图片描述

在任意 JS 脚本中获取环境变量:
在这里插入图片描述

3.2 运行 yarn build:env2

在这里插入图片描述

在任意 JS 脚本中获取环境变量:
在这里插入图片描述

3.3 运行 yarn build:env3

在这里插入图片描述

在任意 JS 脚本中获取环境变量:
在这里插入图片描述

四、不同环境变量的使用示例

// 项目中 axios 请求的封装

import axios from 'axios'
const env = process.env.NODE_ENV;

const request = axios.create({
  withCredentials: false
});
request.interceptors.request.use(config => {
  // ...
  switch(env) {
    case 'env1':
      // ...
      break;
    case 'env2':
      // ...
      break;
    case 'env3':
      // ...
      break;
  }
  return config;
});
export default function ajax() {
  return new Promise(() => {
    request().
    then().
    catch()
  });
}

五、配置除默认变量以外的变量

process.env.NODE_ENVNode 配置的默认变量,如果项目中需要更多这样的变量来适配不同环境,需要做配置。直接设置在 scripts 中是不生效的。

比如直接书写

"scripts": {
  "serve": "vue-cli-service serve",
  "build:test": "cross-env NODE_ENV=env1 CLIENT_NAME=zs URL=http://www.xxx.url vue-cli-service build"
}

在上面的配置中,除了配置了 NODE_ENV 之外,还配置了 CLIENT_NAMEURL,我们可以在任意 JS 脚本中获取,拿到的都是 undifined

在这里插入图片描述

所以,要使用更多的变量,需要在 vue.config.js 中做以下配置:

const webpack = require('webpack');
module.exports = {
  publicPath: './',
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          // 如果需要更多的变量,那就在这里添加更多的键值对
          URL: JSON.stringify(process.env.URL),
          CLIENT_NAME: JSON.stringify(process.env.CLIENT_NAME)
        }
      })
    ]
  }
};

然后更改 package.json 中命令:

"scripts": {
  "serve": "vue-cli-service serve",
  "build:env1": "cross-env NODE_ENV=env1 CLIENT_NAME=zs URL=http://www.xxx.url1 vue-cli-service build",
  "build:env2": "cross-env NODE_ENV=env2 CLIENT_NAME=ls URL=http://www.xxx.url2 vue-cli-service build",
  "build:env3": "cross-env NODE_ENV=env3 CLIENT_NAME=ww URL=http://www.xxx.url3 vue-cli-service build"
}

然后分别运行三个打包命令并且在任意脚本中读取 CLIENT_NAMEURL

yarn build:env1
yarn build:env2
yarn build:env3

获取结果:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

扫码拉你进入前端技术交流群

在这里插入图片描述

  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

锋利的二丫

如果对您有帮助,请博主喝杯奶茶

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值