Nuxt中使用自定义环境变量

欢迎关注前端早茶，与广东靓仔携手共同进阶

前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~

1、安装cross-env

npm i cross-env -D

2、根目录下新建env.js文件；

文件内容如下；二选一

一、

module.exports = {
  // 开发测试环境
  dev: {
    NODE_ENV: 'development',
    API_URL: 'https://*****.com/'
  },
  //生产环境
  pro: {
    NODE_ENV: 'production',
    API_URL: 'https://*****.com/'
  },
}

二、

export default {
dev: {
  server: {
    port: 3000, // default: 3000
    host: '0.0.0.0' // default: localhost
  }, // 项目访问路径
  api: {
    port: '', // default: 3000
    host: 'http://192.168.1.61:8080/schoolEdge'
  } // 接口路径
},
qa: {
  server: {
    port: 6789, // default: 3000
    host: '0.0.0.0' // default: localhost
  }, // 项目访问路径
  api: {
    port: '', // default: 3000
    host: 'http://192.168.0.246:9060/schoolEdge'
   } // 接口路径
  }
};

// 设置不同的环境端口和路径

3.修改package.json文件；

//安装cross-env插件 紧跟MODE='env' 来设置环境变量

"dev": "cross-env MODE=dev nuxt",
"build:uat": "cross-env MODE=uat nuxt build",
"start:uat": "cross-env MODE=uat nuxt start",
"build:prod": "cross-env MODE=prod nuxt build",

4.修改nuxt.config.js文件；

import env from './env';
export default {
  // 服务器端变量映射到客户端
  env: {
    MODE: process.env.MODE
  },
  // 设置项目启动的端口和ip
  server: env[process.env.MODE].server,
}

由此就完成了nuxtjs项目的环境变量配置，变量名字自由选择~

欢迎关注前端早茶，与广东靓仔携手共同进阶

前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~