Internationalization on vue 3 project

Question

I am currently trying to i18n on my vue app to create internationalization.
Therefore I created a project using @vitejs/app and used vue add i18n to add the module to my application.
The problem arises when I try to run the development server after this, using npm run dev. I get the error message:
Uncaught ReferenceError: process is not defined at i18n.js:24.

i18n.js:

      import { createI18n } from 'vue-i18n'

function loadLocaleMessages() {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key).default
    }
  })
  return messages
}

export default createI18n({
  legacy: false,
  locale: process.env.VUE_APP_I18N_LOCALE || 'en', //line 24 that gets the error message
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages()
})

I have currently not tweaked anything about the project from its initial state (I'm going to implement this on a larger project, but am using a smaller project to try and test it out).Therefore the only changes from the projects initial state is the .env folder that is automatically created, the locales folder with an env.json file and the main.ts, file that now looks like this:

      import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'

createApp(App).use(i18n).mount('#app')

.env file:

      VUE_APP_I18N_LOCALE=en
VUE_APP_I18N_FALLBACK_LOCALE=en

and also some node_modules. So my question is, do I have to define "process" somewhere, or is there just some dependencies that I am missing?

Thanks for all help in advance :)