写点什么

Vite 配置环境变量以及反向代理请求

  • 2024-04-14
    四川
  • 本文字数:826 字

    阅读完需:约 3 分钟

Vite配置环境变量以及反向代理请求

在 Vite 中,我们可以通过两种方式配置环境变量,一是在项目根目录下创建.env 文件,二是直接在 vite.config.js 文件中设置。

  1. .env 文件配置环境变量

在项目的根目录下创建.env 文件,可以在其中定义环境变量。Vite 有一个内置的特性,即可以根据不同的模式加载不同的.env 文件。例如,当你在命令行中运行 vite --mode production时,Vite 会加载.env.production 文件。在.env 文件中,你可以定义如下环境变量:

VITE_APP_TITLE=My App
复制代码

然后,你就可以在你的源代码中通过 import.meta.env.VITE_APP_TITLE来访问这个环境变量。

  1. 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 中配置环境变量以及反向代理请求的方法。希望对你有所帮助。


蓝易云-五网CN2服务器【点我购买】蓝易云采用KVM高性能架构,稳定可靠,安全无忧!蓝易云服务器真实CN2回国线路,不伪造,只做高质量海外服务器。



海外免备案云服务器链接:www.tsyvps.com

蓝易云香港五网 CN2 GIA/GT 精品网络服务器。拒绝绕路,拒绝不稳定。

发布于: 刚刚阅读数: 4
用户头像

百度搜索:蓝易云 2023-07-05 加入

香港五网CN2免备案服务器

评论

发布
暂无评论
Vite配置环境变量以及反向代理请求_云计算_百度搜索:蓝易云_InfoQ写作社区