nuxt使用elementui搭建项目(二)：多环境配置

qq_32496215

已于 2022-11-14 16:37:07 修改

阅读量1.1k

点赞数

文章标签： vue nuxt elementui

于 2021-12-01 15:19:44 首次发布

本文链接：https://blog.youkuaiyun.com/qq_32496215/article/details/121656136

版权

这篇博客介绍了两种在Nuxt.js项目中管理环境变量并根据环境切换API地址的方法。第一种通过创建.env.js文件和配置package.json脚本，利用cross-env设置环境变量；第二种方法是创建baseURL插件，根据环境变量设置基础URL。两种方法都在nuxt.config.js中配置了axios代理，并展示了在组件中如何使用这些环境变量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装插件

npm install --save-dev cross-env
npm install @nuxtjs/axios

2.根目录下创建.env.js

module.exports ={
  /*测试环境1*/
  test1:{
    NODE_ENV: 'dev',
    ENV_API:'ip地址1',
  },
  /*测试环境2*/
  test2:{
    NODE_ENV: 'dev',
    ENV_API:'ip地址2'
  },
  /*正式环境*/
  prod:{
    NODE_ENV: 'prod',
    ENV_API:'正式环境地址',
  },
  /*预发布环境*/
  pre:{
    NODE_ENV: 'prod',
    ENV_API:'预发布环境地址',
  }
}

3…package.json配置运行命令

scripts:{
    "dev:test1":"cross-env NODE_ENV=test1 nuxt",
    "dev:test2":"cross-env NODE_ENV=test2 nuxt",
    "build:pre":"cross-ev NODE_ENV=pre nuxt build",
    "build:prod":"cross-ev NODE_ENV=prod nuxt build",
}

4.在nuxt.config.js配置

const env = require('./env');
env:{
    baseUrl:env[process.env.NODE_ENV].ENV_API
}, 
modules:['@nuxtjs/axios'],
axios:{
   //开启代理
    proxy: true,
    //最多重发三次
    retry: { retries: 3 },
    //是否是可信任
    withCredentials: true
} ,
 proxy:{
     '/api':{
         target:env[process.env.NODE_ENV].ENV_API,
      	changeOrigin:true,
     }
 },
 build:{
     vendor: ["axios"],//防止重复打包
 }

5.使用

process.env.baseUrl

第二种方式
1.plugins/baseURL.js

export const  baseURL = ()=>{
    let baseUrl  =''
    if (process.env.environment === 'development') {
      baseUrl = 'xxx'
    } else if (process.env.environment === 'production') {
      baseUrl = 'xxxx'
    }else if(process.env.environment === 'test'){
      baseUrl = 'x'xxx
    }
    return baseUrl;
  }

2.package.json

 "scripts": {
    "dev": "cross-env environment=development nuxt",
    "test": "cross-env environment=test nuxt",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate:dev": "cross-env environment=development nuxt generate",
    "generate:test": "cross-env environment=test nuxt generate",
    "generate:prod": "cross-env environment=production nuxt generate"
  },

3.nuxt.config.js配置

env: {
    environment: process.env.environment
  },

4.组件或者js使用

import {baseURL} from '@/plugins/baseURL'
console.log(baseURL())