env.pembangunan dan env.Tetapan pengeluaran untuk projek vue3

Question

Saya mengikut arahan untuk membuat projek vite untuk Vue3. Kaedah yang saya gunakan tidak mencipta sebarang fail env.development atau env.Production, jadi saya mempunyai sedikit konteks untuk membaca dokumentasi. Saya rasa saya perlukan sesuatu di sana, tetapi apa?

Ia menyusun tetapi gagal pada penghala:

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;

Bagaimana untuk menetapkan URL asas?

Answer 1

Mesti ditambah secara manual pada .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/',
})

Untuk merujuk pembolehubah persekitaran dalam sumber, gunakan import.meta.env 而不是 process.env:

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

Demo