javascript - nextjs 的生产 URL

Question

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

这是我的文件:

.env:

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

.env.生产:

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

.babelrc:

{
  "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 })
};

希望有帮助，干杯!

Answer 1

你一定忘了安装插件

只需将其粘贴到您的包 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 install
或者你可以运行 npm install babel-plugin-inline-dotenv babel-plugin-transform-inline-environment-variables --save -dev
或者您可以根据本指南以不同方式实现此功能 with-universal-configuration

.bablerc

{
"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-plugin-transform-define