vite .env环境变量配置(vericut9.0环境变量)

vite .env环境变量配置 官方文档https://cn.vitejs.dev/config/1. .env.development和.env.production(放在根目录下，一定看清楚别放在SRC下)

推荐整理分享vite .env环境变量配置(vericut9.0环境变量)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vericut环境变量,vericut9.0环境变量,vericut环境变量lshost,vericut9.0.1环境变量,vericut9.0.1环境变量,env.production环境变量可以配置多个吗,vericut环境变量lshost,env环境变量修改,内容如对您有帮助，希望把文章链接给更多的朋友！

        默认情况下，开发服务器 (dev 命令) 运行在 development (开发) 模式，而 build 命令则运行在 production (生产) 模式。

        在某些情况下，若想在 vite build 时运行不同的模式来渲染不同的标题，你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。例如，如果你想在 staging （预发布）模式下构建应用：

vite build --mode staging

使用vite环境变量命名必须以VITE_开头否则无法识别

.env.development

# 本地环境NODE_ENV = 'development'#本地环境接口地址VITE_BASE_URL = 'https://mock.apifox.cn/m1/2303444-0-default'

.env.production

# 生产环境NODE_ENV = 'production'#生产环境接口地址VITE_BASE_URL = 'https://mock.apifox.cn/m1/2303444-0-default'2. vite弃用了process.env改用import.meta.env（vite.config.js中不能使用import.meta.env）

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：

import.meta.env.MODE: {string} 应用运行的模式。

import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。

import.meta.env.PROD: {boolean} 应用是否运行在生产环境。

import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。

import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

3. vite.config.js中使用环境变量地址进行跨域

环境变量通常可以从 process.env 获得。

注意 Vite 默认是不加载 .env 文件的，因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个，举个例子，root 和 envDir 选项会影响加载行为。不过当你的确需要时，你可以使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件。

js

import { defineConfig, loadEnv } from 'vite'export default defineConfig(({ command, mode }) => { // 根据当前工作目录中的 `mode` 加载 .env 文件 // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。 const env = loadEnv(mode, process.cwd(), '') return { // vite 配置 define: { __APP_ENV__: env.APP_ENV, }, }})

配置跨域

export default defineConfig(({mode}) => { const env = loadEnv(mode, process.cwd()); return ({ plugins: [vue()], resolve: {}, server: { port: 8088, proxy: { '/api': { target:env.VITE_BASE_URL, changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } })})