我正在使用NextJs构建一个应用程序。我有两个不同的 URL 用于生产和开发,我想为客户端访问相应的环境 URL。我遵循了本指南,但我的 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 })
};
希望有帮助,干杯!