Nuxt.js如何像普通vue项目一样，配置环境变量env

下载env的环境依赖

• npm install cross-env

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

  "scripts": {
    "dev": "cross-env NODE_ENV=dev nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "analyze": "npm run build --report",
    "generate": "cross-env NODE_ENV=pro nuxt generate",
    "generate:test": "cross-env NODE_ENV=test nuxt generate"
  },

在项目根目录创建一个env.js的文件写入配置环境

env.js 环境配置代码

module.exports = {
  // 开发环境
  dev: {
    // 判断环境
    NODE_ENV: 'development',
    // 代理的后端请求服务器地址
    SERVER_URL: '',
  },
  // 测试环境
  test: {
    // 判断环境
    NODE_ENV: 'test',
    // 打包name
    output_Dir:'dist-test',
    // 代理的后端请求服务器地址
    SERVER_URL: '',
  },
  // 生产环境
  pro: {
    // 判断环境
    NODE_ENV: 'production',
    // 打包name
    output_Dir:'dist',
    // 代理的后端请求服务器地址
    SERVER_URL: '',
  },
  /* dev: {
    // 判断环境
    NODE_ENV: 'development',
    // 统一登录
    LOGIN_URL: 'http://xxx',
    // 请求前缀
    BASE_PREFIX: '/dev-api',
    // 代理的后端请求服务器地址
    SERVER_URL: '',
    // 前端系统跑的端口
    SYSTEM_PORT: ''
    }, 
  */
}

nuxt.config.js 中引入配置env环境变量

// 引入env
import env from './env';

export default {
  // 环境配置
  env: {
    NODE_ENV: env[process.env.NODE_ENV].NODE_ENV,
    // 请求服务器地址
    SERVER_URL: env[process.env.NODE_ENV].SERVER_URL,
  },
  
  generate: {
    // 指定打包文件目录
    dir: env[process.env.NODE_ENV].output_Dir
  },
  
  // 代理转发
  proxy: {
    '/requestApi': {
      target: env[process.env.NODE_ENV].SERVER_URL,
      pathRewrite: {
        '^/requestApi': ''
      },
      secure: false,
      changeOrigin: true
    },
  }
}

页面使用环境变量

  console.log(process.env.NODE_ENV);

打包命令

## 正式包
$ npm run generate

## 测试包
$ npm run generate:test