e起飞young
一个前端码农的技术博客
基于vue-cli或nuxt的项目自定义环境变量的方法
[ 2018/12/03, 1853阅, 1评 ]

1、基于vue-cli

在实际项目开发中,经常会碰到需要环境变量的情景。在vue-cli的环境下,默认已经配置了一个NODE_ENV的环境变量,当npm run dev的时候这个是development, 当npm run build 的时候这个是production。用过vue-cli开发的通常对这个都不陌生,用这个最多的地方基本就是我们配置网络请求的域名头了。

但是默认提供的development和production这两种情况完全不够用呀有木有,比如实际上有本地开发的地址、线上测试的地址和生产环境的地址等,然后本地开发时不同的模块又有不同的端口怎么破?好麻烦有木有?!所以这时就需要自己来动手啦!

由于windows不支持NODE_ENV=development这样的设置方式(会报错)。这时,就需要借助于强大的cross-env啦(他能够提供一个设置环境变量的scripts,让你能够以unix方式设置环境变量,然后在windows上也能兼容运行。)

首先,安装npm i cross-env -D

在package.json中,默认的配置是这样的:

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

现在可以把它改成这样:

  "scripts": {
    "dev": "cross-env MY_API_ENV=local webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "devTest": "cross-env MY_API_ENV=test webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "devProduct": "cross-env MY_API_ENV=product webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "cross-env MY_API_ENV=test node build/build.js",
    "buildProduct": "cross-env MY_API_ENV=product node build/build.js"
  },

由于搭配webpack重新设置了process.env的值,需要在webpack.dev.conf.js及webpack.prod.conf.js文件中:

webpack.dev.conf.js
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env'),
      'process.env.MY_API_ENV': JSON.stringify(process.env.MY_API_ENV)//增加此行
    })
webpack.prod.conf.js
    new webpack.DefinePlugin({
      'process.env': env,
      'process.env.MY_API_ENV': JSON.stringify(process.env.MY_API_ENV)//增加此行
    })

最后,定义一个api config文件,内容大概如下:

let apiCon = {}
if(process.env.MY_API_ENV === 'local'){
    apiCon = {
        // ...
    }
}else if(process.env.MY_API_ENV === 'test'){
    apiCon = {
        // ...
    }
}else if(process.env.MY_API_ENV === 'product'){
    apiCon = {
        // ...
    }
}

export {
    apiCon
}

酱紫就可以愉快滴玩耍啦!

2、基于nuxt

如果是基于nuxt,那么可以这样:

nuxt.config.js文件中
    env: {
        MY_API_ENV: process.env.MY_API_ENV
    }

同理package.json的scripts中

"dev": "cross-env MY_API_ENV=local nuxt",
"devTest": "cross-env MY_API_ENV=test nuxt",
"devProduct": "cross-env MY_API_ENV=product nuxt",
"build": "cross-env MY_API_ENV=test nuxt build",
"buildProduct": "cross-env MY_API_ENV=product nuxt build",

相关资料

cross-env简介

NodeJs/Vue项目中对process.env的使用

有朋自远方来...评论一下呗O(∩_∩)O

  • 评论(1)

    天津网站建设 [ 回复 ] 1楼
    2018-12-28 16:01

    这个厉害了

    搜索