vue3 專案的 env.development 和 env.Production 設定

Question

我按照說明為 Vue3 建立了一個 vite 專案。我使用的方法沒有建立任何 env.development 或 env.Production 文件，因此我幾乎沒有閱讀文件的上下文。我猜我需要那裡的東西，但是什麼？

它可以編譯，但在路由器上失敗：

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;

如何設定基本網址？

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), ✅ 

示範