关于debian:Vite配置环境变量以及反向代理请求

2次阅读

共计 937 个字符，预计需要花费 3 分钟才能阅读完成。

在 Vite 中，咱们能够通过两种形式配置环境变量，一是在我的项目根目录下创立.env 文件，二是间接在 vite.config.js 文件中设置。

.env 文件配置环境变量

在我的项目的根目录下创立.env 文件，能够在其中定义环境变量。Vite 有一个内置的个性，即能够依据不同的模式加载不同的.env 文件。例如，当你在命令行中运行 vite --mode production 时，Vite 会加载.env.production 文件。在.env 文件中，你能够定义如下环境变量：

VITE_APP_TITLE=My App

而后，你就能够在你的源代码中通过 import.meta.env.VITE_APP_TITLE 来拜访这个环境变量。

vite.config.js 文件中配置环境变量

除了在.env 文件中定义环境变量外，你还能够在 vite.config.js 文件中定义环境变量。例如：

export default defineConfig({plugins: [vue()],
  define: {'process.env.VITE_APP_TITLE': 'My App',},
});

而后，你就能够在你的源代码中通过 process.env.VITE_APP_TITLE 来拜访这个环境变量。

接下来，咱们来看看如何在 Vite 中配置反向代理申请。Vite 应用 http-proxy 模块提供代理反对，咱们能够在 vite.config.js 文件中配置代理规定。例如：

export default defineConfig({plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      },
    },
  },
});

在上述配置中，咱们设置了一个代理规定，当拜访门路以 /api 结尾时，会被代理到 http://localhost:5000，并且门路中的 /api 会被去掉。例如，当你拜访 /api/users 时，实际上拜访的是 http://localhost:5000/users。

以上就是在 Vite 中配置环境变量以及反向代理申请的办法。心愿对你有所帮忙。

正文完