基于vue-cli或nuxt的项目自定义环境变量的方法
首页 >  Web前端 > Vue  > 2018年12月03日阅(539)评(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的使用

前端常用社会化分享接口整理
nuxt.js服务端渲染项目怎么发布到服务器?

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

QQ
昵称*
邮箱*
主页

评论(1)

1楼、天津网站建设 [回复该留言]
2018-12-28 16:01
这个厉害了