Vite项目中环境变量的使用指南：解决‘Property ‘env’ does not exist on type ‘ImportMeta’’错误

2024-03-09 09:52:47

Vite 项目中使用环境变量的指南

引言

在 Vue.js 项目中使用 Vite 构建时，你可能会遇到 Property 'env' does not exist on type 'ImportMeta'.ts(2339) 错误。本文旨在通过逐步指南帮助你解决此错误，并提供有关在 Vite 项目中使用环境变量的深入信息。

问题

Property 'env' does not exist on type 'ImportMeta'.ts(2339) 错误表明 Vite 无法识别 import.meta.env 中的环境变量。这可能是由以下原因引起的：

类型定义不正确
环境变量配置错误

解决方案

1. 检查类型定义

确保在 tsconfig.json 文件中正确引用了 vite/client 类型定义。你还应该检查 env.d.ts 文件中 import.meta 接口的定义是否正确。

2. 配置环境变量

在 Vite 配置文件中，确保正确配置了环境变量。例如，在 vite.config.ts 文件中，可以指定如下内容：

import { defineConfig } from 'vite'

export default defineConfig({
  envDir: 'path/to/environment/variables',
})

其他提示

确保在构建命令中使用了正确的环境变量。例如：npm run build --env.NODE_ENV=production
尝试清除 Vite 缓存：rm -rf node_modules/.vite
更新 Vite 和 Vue.js 依赖项的版本：npm install vite vue@next --save-dev

示例代码

你可以使用以下环境变量来设置 BASE_URL：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_APP_BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
 ]
})

// test access to Vite environment variable
console.log(import.meta.env.VITE_APP_BASE_URL);

export default router