1

在里面svelte.config.js我有这个：

    preprocess: autoPreprocess({
        replace: [
            ['API_ENDPOINT', JSON.stringify(process.env.API_ENDPOINT)]
        ]
    }),

它应该替换字符串“API_ENDPOINT”，但事实并非如此。

这是我使用它的方式：

async function api(url: string, body = {}, opts = {}) {
    const endpoint = 'API_ENDPOINT';
    console.log(endpoint);
    const res = await fetch(endpoint + url, {
        method: 'POST',
        headers: {
            'Content-type': 'application/json',
        },
        body: JSON.stringify(body)
    });

    if (!res.ok) {
        const err = await res.json();
        throw (err || res.statusText);
    }

    return opts.raw ? await res.text() : await res.json();
}

export default api;

我得到的只是http://localhost:3000/API_ENDPOINT/subscriptions

4

1 回答 1

0

在您的svelte.config.js文件中，而不是

autoPreprocess({
  replace: [['process.env.NODE_ENV', JSON.stringify(process.env.NODE_ENV)]],
});

利用

import sveltePreprocess from 'svelte-preprocess'
sveltePreprocess({
  replace: [['process.env.NODE_ENV', JSON.stringify(process.env.NODE_ENV)]],
});

在我看来，这autoPreprocess已被弃用，但README文档没有正确更新。

您可能还需要考虑执行以下操作之一：

process.env.API_ENDPOINT直接使用
const endpoint = process.env.API_ENDPOINT;
创建一个单独的 javascript 函数来处理环境变量

像这样的东西

envVars.js

import dotenv from 'dotenv-flow';
import path from 'path';

dotenv.config({
  path: path.resolve(__dirname, `path-to-your-(.env)-file`),
});

export const getEnvVar = (key) => process.env[key];

并像这样使用它：

import { getEnvVar } from 'path-to-envVars'
const endpoint = getEnvVar('API_ENDPOINT');
如果您已经在使用Vite作为构建工具

在文件中添加变量，.env如下所示：

VITE_YOUR_ENV_VAR_GOES_HERE=bar

在你的情况下：

VITE_API_ENDPOINT=your_value

然后将它们导入单独的 javascript 或 typescript 文件中

envVars.js

export const envVars = {
  API_ENDPOINT: import.meta.env.VITE_API_ENDPOINT
};

然后导入 envVars 并像这样使用它：

import { envVars } from 'path-to-envVars.js'

现在您可以像这样读取环境变量：

envVars.myVariable 或者，在你的情况下 const endpoint = envVars.API_ENDPOINT

于 2021-07-24T06:14:23.363 回答