nuxt通过cross-env配置环境变量

2,625 阅读1分钟

安装

npm install cross-env -D

配置package.json

配置环境变量NODE_ENV,BASE_URL,名字由你自己定。当项目运行起来后,这两个环境变量就存在于当前项目了。

"scripts": {
  "dev:test": "cross-env NODE_ENV=development BASE_URL=http://test.xx.com nuxt",
  "dev:prod": "cross-env NODE_ENV=production BASE_URL=http://api.xx.com nuxt",

  "build": "cross-env NODE_ENV=production BASE_URL=http://api.xx.com nuxt build",
  "start": "cross-env NODE_ENV=production BASE_URL=http://api.xx.com  nuxt start",

  "generate": "nuxt generate"
},

NODE_ENV=development 开发环境; NODE_ENV=production 生产环境

配置 nuxt.config.js

配置 nuxt.config.js,是为了便于在 context环境中使用环境变量。

env: {
  baseUrl: process.env.BASE_URL,
  nodeEnv: process.env.NODE_ENV
},

获取环境变量,判断当前环境

获取环境变量,判断当前环境是 开发环境 还是 生产环境。

可用 process.env或者 context.env获取当前环境是开发环境还是生产环境。

async asyncData(context){
  console.log(process.env.NODE_ENV)
  console.log(context.env.nodeEnv)
  
  if (process.env.NODE_ENV === 'development') {
      // 开发环境
  } else {
      // 生产环境
  }
  
}  

附加:process.server/process.client

判断服务/客户端

process.server
process.client