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?
1
0
0
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), ?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
