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


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

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

蓝易云是一家专注于香港及国内数据中心服务的提供商,提供高质量的服务器租用和云计算服务、包括免备案香港服务器、香港CN2、美国服务器、海外高防服务器、国内高防服务器、香港VPS等。致力于为用户提供稳定,快速的网络连接和优质的客户体验。
最后修改:2023 年 09 月 07 日
如果觉得我的文章对你有用,请随意赞赏