Paramètres env.development et env.Production pour les projets vue3

Question

J'ai suivi les instructions pour créer un projet vite pour Vue3. La méthode que j'utilise ne crée aucun fichier env.development ou env.Production, j'ai donc peu de contexte pour lire la documentation. Je suppose que j'ai besoin de quelque chose là-bas, mais quoi ?

Il compile mais échoue sur le routeur :

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;

Comment définir l'URL de base ?

Answer 1

Doit être ajouté manuellement à .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/',
})

Pour référencer les variables d'environnement dans les sources, utilisez import.meta.env 而不是 process.env :

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

Démo