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?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The
.envfiles (including.env.development) must be added manually to your project directory. However, you don't need them to setBASE_URLbecauseBASE_URLis automatically set from thebaseconfiguration invite.config .jsMedium: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.envinstead ofprocess.env:Demo