vue3使用import.meta.env在vite.config.ts下使用env环境变量的方法

编程一枚

已于 2022-05-18 10:47:14 修改

阅读量1.3w

点赞数 5

分类专栏：笔记文章标签： typescript vue.js 前端

于 2022-05-18 10:25:46 首次发布

本文链接：https://blog.csdn.net/qq_45429889/article/details/124837035

版权

笔记专栏收录该内容

1 篇文章

订阅专栏

这篇博客探讨了在Vue2中如何使用process.env获取环境变量，以及在Vue3中由于变化需要如何改用import.meta.env。作者指出process.env在Vue3中不再生效，并提供了vite.config.ts配置示例，说明在vite配置文件中加载环境变量的方法，特别提到了在vite.config.ts中不能直接使用import.meta.env的问题以及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2中

vue2使用 process.env获取环境变量

vue3中

process.env 在vue3中不生效
vue3中使用 import.meta.env 获取环境变量

vite.config.ts中无法使用import.meta.env

const VITE_APP_SERVER_URL: string = loadEnv(mode, process.cwd()).VITE_APP_SERVER_URL;

vite.config.ts配置如下

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default (({ mode }) => {

    const VITE_APP_SERVER_URL: string = loadEnv(mode, process.cwd()).VITE_APP_SERVER_URL;

    return defineConfig({
        plugins: [vue()],
        server: {
            port: 6060,
            proxy: {
                '/api': {
                    target: VITE_APP_SERVER_URL,
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/api/, '')
                },
            }
        },
        
    })
})