env.development- und env.Production-Einstellungen für vue3-Projekte

Question

Ich habe die Anweisungen befolgt, um ein Vite-Projekt für Vue3 zu erstellen. Die von mir verwendete Methode erstellt keine env.development- oder env.Production-Dateien, daher habe ich wenig Kontext zum Lesen der Dokumentation. Ich schätze, ich brauche da etwas, aber was?

Es wird kompiliert, schlägt aber auf dem Router fehl:

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;

Wie lege ich die Basis-URL fest?

Answer 1

必须手动将 .env 文件（包括 .env.development）添加到您的项目目录中。但是，您不需要它们来设置 BASE_URL，因为 BASE_URL 是从 base 配置自动设置的在 vite.config.js 中：

import { defineConfig } from 'vite'

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

要在源中引用环境变量，请使用 import.meta.env 而不是 process.env：

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

演示