vite配置环境变量与模式

vite配置环境变量与模式

文章目录

    • vite配置环境变量与模式
      • 环境变量设置
        • .env.development
        • .env.production
        • 读取环境变量

环境变量与模式


环境变量设置

  • 注意: 命名规范 VITE_ 为前缀的变量才会暴露给经过vite处理的代码
  • vite serve 时是development开发模式, vite build时是production生产模式。
  • 分别创建配置文件: .env.development.env.production

.env.development

# .env.development
VITE_APP_TITLE = MY PROJECT
  • 效果图

vite配置环境变量与模式_第1张图片


.env.production

# .env.production
ENV= 'production'

#base api
VITE_APP_BASE_API = 'http://vitetest.com'
  • 效果图

vite配置环境变量与模式_第2张图片


读取环境变量

  • 读取环境变量使用import.meta.env.xxx,可在 main.js中测试
// base api
console.log(import.meta.env.VITE_APP_BASE_API);

// title
console.log(import.meta.env.VITE_APP_TITLE);

你可能感兴趣的:(vue,vite配置环境变量与模式,vite)