在生产中未定义的Import.meta.env构建vitejs

Question

我正在使用vitejs静态地编译我的react，但是在构建.env导入变得没有定义之后，这在开发阶段就不是这样了。

阅读文档后，我发现这些变量被相应的值替换，但是在查看dev工具中的源代码/编译代码后，它显示了一个带有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,
    },
  });
};

还有我引用这些env var的代码

//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,
  };
};

Answer 1

我刚刚意识到了ViteJS文档的意思，如果有人也有这种情况的话，我就不写了。

​

​

Answer 2

您不必使用VITE_。只要在vite配置上的envPrefix选项中定义前缀，就可以使用任何前缀。