在 nuxt 中针对不同情况使用不同的环境

Posted 2023-02-22

【中文标题】在 nuxt 中针对不同情况使用不同的环境

【英文标题】：using different env for different cases in nuxt

【发布时间】：2020-06-12 13:18:50

【问题描述】：

我是 Nuxt 或任何类型的节点东西的新手。我正在尝试为不同的情况创建不同的环境，例如如果我想测试我的应用程序，我希望开发对象块运行（指向开发端点）等，以下是一个示例

[
 prod: 
   server: www.mysite.com,
   api: 'www.jsonplaceholder.com/'
  ,
 dev: 
   server: www.internal-mysite.com,
   api: 'www.jsonplaceholder.com/'
  
]

所以当我执行npm run dev 时，它会使用那些端点运行应用程序从中，我尝试观看this，但我无法通过 NODE_ENV=config.dev（鉴于 config 是一个包含对象的文件）我怎样才能让我的应用程序像那样工作？

详细的回答会很有帮助。

【参考方案1】：

我已经创建了一个config.js，如下所示

const MasterKeys = 
  development: 
    apiEndPoint: 'example.com',
    clientId: '1234567',
    clientSecret: '11111111'
  ,
  staging: 
    apiEndPoint: 'staging.example.com',
    clientId: '1234567',
    clientSecret: '11111111'
  ,
  production: 
    apiEndPoint: 'prod.example.com',
    clientId: '1234567',
    clientSecret: '11111111'
  
;

export  MasterKeys ;

将该文件导入nuxt.config.js，如下所示

let appEnv = process.env.NODE_ENV || 'development';
import  MasterKeys  from './config.js';

现在，每当我想在 nuxt.config.js 中使用 apiEndPoint 值时，我都会以 MasterKeys[appEnv].apiEndPoint 的身份访问

如果我想在组件中使用来自config.js 的任何配置键，我将使用nuxt.config.js 的env 属性，如下例所示。

  env: 
    apiEndPoint: MasterKeys[appEnv].apiEndPoint,
    clientId: MasterKeys[appEnv].clientId
  

然后在组件中，我可以将该值作为process.env.apiEndPoint 访问

并且将在package.json 中声明 env 如下

  "scripts": 
    "dev": "nuxt",
    "stagingbuild": "NODE_ENV=staging nuxt build",
    "staging": "NODE_ENV=staging nuxt start",
    "build": "NODE_ENV=production nuxt build",
    "start": "NODE_ENV=production nuxt start"
  

希望对你有帮助！！！！

【讨论】：

[appEnv] 是什么，我看到你创建了一个对象但[appEnv] 是一个数组语法？

让 appEnv = process.env.NODE_ENV || '发展';在 nuxt.config.js 中声明环境变量

默认意味着当您在 package.json 中运行 npm run dev 时，我们不会提供任何 NODE_ENV，因此根据我们在 nuxt.config.js 中为 appEnv 的声明，它将采用 development

nuxt.config.js 不允许你在模块外导入语句。

你能详细说明吗？

【参考方案2】：

创建两个单独的配置文件并使用条件导入它们，并在nuxt配置中使用如下

const CONFIG = process.env.NODE_ENV === 'development' ? require('dev-config') : require('prod-config');

module.exports = 
  axios: 
    baseURL: CONFIG.API_BASE
  

【讨论】：

但它不仅仅是一个 url，还有 r 一堆 url 需要根据将运行的环境以及如何在 nuxt 配置中使用该服务器进行更改？

当你说需要('dev-config')时，文件名应该是dev-config.env吗？