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

演示