[JavaScript知识库]普歌-实测Nuxt.js入坑，配置dev、test、pro三种环境的变量env

先下载一个cross-env模块，比较好控制环境

• npm install cross-env

在package.json中写入环境的配置

 "scripts": {
    "dev": "cross-env NODE_ENV=dev nuxt --open ",
    "test": "cross-env NODE_ENV=test nuxt",
    "build": "cross-env NODE_ENV=pro nuxt build",
    "start": "cross-env NODE_ENV=pro nuxt start",
    "generate": "nuxt generate"
  },

在nuxt.config.js同级目录创建一个env.js文件,写入想要的配置

module.exports = {
  // 开发环境
  dev: {
    NODE_ENV: 'development',
    // 统一登录
    LOGIN_URL: 'http://xxx',
    // 请求前缀
    BASE_PREFIX: '/dev-api',
    // 代理的后端请求服务器地址
    SERVER_URL: 'https://xxx.xxx',
    // 前端系统跑的端口
    SYSTEM_PORT: '8888'
  },
  // 测试环境
  test: {
    NODE_ENV: 'test',
     // 统一登录
    LOGIN_URL: 'http://xxx',
    // 请求前缀
    BASE_PREFIX: '/test-api',
    // 代理的后端请求服务器地址
    SERVER_URL: 'https://xxx.xxx',
    // 前端系统跑的端口
    SYSTEM_PORT: '8888'

  },
  // 生产环境
  pro: {
    NODE_ENV: 'production',
    // 统一登录
    LOGIN_URL: 'http://xxx',
    // 请求前缀
    BASE_PREFIX: '/prod-api',
    // 代理的后端请求服务器地址
    SERVER_URL: 'https://xxx.xxx',
    // 前端系统跑的端口
    SYSTEM_PORT: '8888'
  }
}

在nuxt.config.js中的env模块中设置环境变量

• 引入env

import env from './env' 

• env模块

//nuxt.config.js中
 // 环境变量
  env: {
    NODE_ENV: env[process.env.NODE_ENV].NODE_ENV,
    // 统一登录 process.env.authURL
    LOGIN_URL: env[process.env.NODE_ENV].LOGIN_URL,
    // 请求前缀
    BASE_PREFIX: env[process.env.NODE_ENV].BASE_PREFIX,
    // 请求服务器地址
    SERVER_URL: env[process.env.NODE_ENV].SERVER_URL,
    // 前端系统的端口
    SYSTEM_PORT: env[process.env.NODE_ENV].SYSTEM_PORT
  },

• 在其他地方直接通过process.env.xxx用
  
  更多推荐：wantLG的《普歌-Nuxt.js优化坑、进行CDN加速(axios/jQuery/swiper/vue-lazyload图片懒加载等进行cdn加载)、elementui进行按需加载)》

• 作者：wantLG
• 本文源自：wantLG的《普歌-实测Nuxt.js入坑，配置dev、test、pro三种环境的变量env》
• 本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖