标签：3000 自定义 default cross MODE env nuxt 环境变量 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项目的环境变量配置，变量名字自由选择~

欢迎关注前端早茶，与广东靓仔携手共同进阶 前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~

标签：3000,自定义,default,cross,MODE,env,nuxt,环境变量,Nuxt
来源： https://www.cnblogs.com/cczlovexw/p/16337868.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。