如何定义苗条中的环境变量?

Question

我是新的苗条，我想使用一些环境变量，如base_url在不同的组件。我知道我可以定义存储，并把这些值放在那里，比如:

const Store = writable([
{ 
base_url: "http://127.0.0.1:8080",
}
]);

和每次使用

将store导入到组件时

let base_url = "";
import Store from "../stores/Store.js";
Store.subscribe((data) => {
base_url = data.base_url  
});

但这涉及到大量的样板代码，我发现存储更适合于动态数据而不是静态值。所以我想知道更习惯/方便的方法是什么?

Answer 1

我主要做的是创建一个名为environment.js或类似的文件，并把我所有的环境变量在那里。然后我只需要把它们导入到我需要的地方。

// environment.js:
export const base_url = '..';
// somewhere-else.js/somecomponent.svelte:
import { base_url } from './path/to/environment.js';

这也将使替换这些变量更容易，这取决于您是在开发模式还是生产模式。然后你可以很容易地添加替换解决方案(用合适的变量值替换变量值)，这取决于你使用的设置(Rollup: Rollup -plugin-replace, Vite: env文件等)。

Answer 2

我的结构如下:

src/config/endpoint.js

//src/config/endpoint.js
let base_url = '';
switch(ENV){
case ENV_PROD:
base_url = 'http://www.example.com/api';
break;
case ENV_TEST:
base_url = 'http://www.example.com/test_api';
break;
default:
base_url = 'http://localhost:3301/api';
break;
}
export base_url;

现在在组件或文件中导入endpoint.js，并像这样使用:

//App.svelte
import { base_url } from './../config/endpoint.js';