After starting a new project with vue.js and vite, I encountered a problem. Everything worked fine when using npm run dev, but I kept getting an error when running npm run build:
Property 'env' does not exist on type 'ImportMeta'.ts(2339)import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.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.BASE_URL);
export default router
Below is my env.d.ts
/// <reference types="vite/client" />
interface ImportMeta {
readonly env: Record<string, string>;
}
And here is my tsconfig.json
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.vitest.json"
}
],
"compilerOptions": {
"module": "NodeNext",
"allowJs": true,
"types": ["vite/client"]
}
}
I have already tried adding compiler options for vite/client, but the issue persists. Any tips or guidance would be greatly appreciated. Thank you in advance for any assistance.