Javascript nextjs的生产URL

我正在使用它构建一个应用程序。我有两个不同的URL用于生产和开发，我想访问客户端环境的相应URL。我遵循了这一点，但是关于开发的PROCESS.ENV.API_URL是空的

这是我的档案：

.env:

.环境生产：

API_URL=https://my-production-url.com

.LRC：

{
  "presets": [
    "next/babel"
  ],
  "env": {
    "development": {
      "plugins": ["inline-dotenv"]
    },
    "production": {
      "plugins": ["transform-inline-environment-variables"]
    }
  }

}

环境变量用法：

import 'isomorphic-fetch';

export const SET_QUERY = 'SET_QUERY';
export const CLEAR_SEARCH = 'CLEAR_SEARCH';
export const START_FETCHING_SEARCH = 'START_FETCHING_SEARCH';
export const SET_SEARCH_RESULTS = 'SET_SEARCH_RESULTS';
export const FETCHING_SEARCH_FAILED = 'FETCHING_SEARCH_FAILED';

export const getSearch = value => {
    const url = `${process.env.API_URL}search?q=${value}`; // THIS IS EMPTY
    console.log(url);
    return fetch(url);
};

// Implement search action
export const doSearch = query => dispatch => {
    dispatch({ type: START_FETCHING_SEARCH });
    return dispatch => {
        return getSearch(query).then(response => {
            dispatch({ type: SET_SEARCH_RESULTS });
        }, () => {
            dispatch({ type: FETCHING_SEARCH_FAILED });
        });
    };
};

export const clearSearch = () => dispatch => {
    return dispatch({ type: CLEAR_SEARCH })
};

---

希望有帮助，干杯

你一定忘了安装插件

只需将其粘贴到程序包json文件中：

"dependencies": {
    "next": "latest",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "babel-plugin-inline-dotenv": "^1.1.1",
    "babel-plugin-transform-inline-environment-variables": "^0.1.1"
  }

跑

npm安装

或者你可以跑

npm安装babel插件内联dotenv babel插件转换内联环境变量--save-dev

或者，您可以根据本指南以不同方式实现此功能

巴勃勒克先生

{
"plugins":[
    ["transform-define", "./env-config.js"]
]
}

.env-config.js

const prod = 'production' === process.env.NODE_ENV

module.exports = {
    'process.env.API_URL': prod ? 'http://api.dev.com' : 'http://api.local.com/',
}

---

在json包中，您应该安装

babel插件转换定义
如果由于某种原因变量未显示在页面上，请尝试清除babel加载程序缓存：

 rm -rf ./node_modules/.cache/babel-loader

 rm -rf ./node_modules/.cache/babel-loader