javascript - Import.meta.env 在生产构建 vitejs 上未定义
问题描述
我正在使用 vitejs 静态编译我的反应应用程序,但是在构建 .env 导入之后变得未定义,这在开发阶段并非如此。
阅读文档我发现这些变量被它们对应的值替换,但是在提供它之后查看开发工具中的源/编译代码时,会显示一个带有 env 名称/键的空对象
我可能在 vite.config.ts 中有错误的配置,所以在这里。
//vite.config.ts
import { defineConfig, loadEnv } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import { getAliases } from 'vite-aliases';
const aliases = getAliases({
path: 'src',
prefix: '@',
});
export default ({ mode }) => {
process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
// import.meta.env.VITE_NAME available here with: process.env.VITE_NAME
// import.meta.env.VITE_PORT available here with: process.env.VITE_PORT
const plugins = mode === 'development' ? [reactRefresh()] : [];
return defineConfig({
plugins,
publicDir: 'src/assets',
resolve: {
alias: aliases,
},
build: {
chunkSizeWarningLimit: 1500,
},
});
};
还有我引用这些环境变量的代码
//config.ts
export const config = () => {
const url = import.meta.env.VITE_SERVER_URL;
const api = import.meta.env.VITE_API_ENDPOINT;
const auth = import.meta.env.VITE_AUTH_ENDPOINT;
const isProd = import.meta.env.MODE === 'production';
const isDev = import.meta.env.MODE === 'development';
console.log(url, api, auth);
return {
api: (endpoint: string) => `${url}${api}${endpoint}`,
auth: (endpoint: string) => `${url}${auth}${endpoint}`,
test: (endpoint: string) => `${url}test${endpoint}`,
isProd,
isDev,
};
};
解决方案
推荐阅读
- mysql - MySQL:分组
- android - 在 Android 8 上在后台录制音频
- python - 程序完成时终止非守护进程python后台进程
- android - 更改按钮的启用颜色而不更改禁用颜色
- r - R中n个伯努利随机变量的排列
- python - 从雅典娜输出中忽略 .csv.metadata 文件
- scala - 为什么我的服务器没有在 Play 2.6.x 中请求客户端证书?
- .net - File.ReadAllLines() 无法从 Excel 打开的文件中读取
- php - API 返回 json 数组对象,其中包含点、空格和 % 的键。如何从数组中重命名或删除键?
- javascript - 根据点击获得“顶部”和“右侧”位置