env.development and env.Production settings for vue3 projects

Question

I followed the instructions to create a vite project for Vue3. The method I'm using doesn't create any env.development or env.Production files, so I have little context for reading the documentation. I guess I need something there, but what?

It compiles but fails on the router:

import { createWebHistory, createRouter, RouteRecordRaw } from "vue-router";

const history = createWebHistory();
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Appointments",
    component: () => import("../views/Appointments.vue"),
  },
  {
    path: "/pets",
    name: "Appointments",
    component: () => import("../views/Pets.vue"),
  },
  {
    path: "/Claims",
    name: "Claims",
    component: () => import("../views/Claims.vue"),
  },
];
const router = createRouter({
  //fails on this line:
  history: createWebHistory(process.env.BASE_URL),
  routes,
});
  
export default router;

How to set the base URL?

Answer 1

The .env files (including .env.development) must be added manually to your project directory. However, you don't need them to set BASE_URL because BASE_URL is automatically set from the base configuration in vite.config .js Medium:

import { defineConfig } from 'vite'

export default defineConfig({
  base: process.env.NODE_ENV === 'development'
         ? '/my/dev/baseurl/'
         : '/my/prod/baseurl/',
})

To reference environment variables in the source, use import.meta.env instead of process.env:

// createWebHistory(process.env.BASE_URL), ❌
createWebHistory(import.meta.env.BASE_URL), ✅ 

Demo