位置: IT常识 - 正文
vite .env环境变量配置(vericut9.0环境变量)
编辑：rootadmin推荐整理分享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/, '') } } } })})上一篇：el-upload组件的文件回显功能和添加文件到elupload组件(elementui的upload组件详解)
下一篇：用jQuery实现轮播图——超简单(代码解释)(jquery制作轮播切换效果)
