环境变量必须以VITE开头

1.VITE_BASE_API：

• 在开发环境中设置为 /dev-api，这是一个本地 mock 地址，通常用于模拟后端接口。

2.VITE_ENABLE_ERUDA：

• 设置为 "true"，表示启用调试工具，通常是为了方便开发和调试。

3.VITE_PUBLIC_PATH：

• 在开发环境中设置的打包路径为 http://192.168.10.7:8001，这是一个本地开发服务器的地址。

开发环境:

# baseUrl 
# /dev-api 为本地 mock 地址，不使用 mock 的话此处换为你的开发环境接口地址，例如 http://192.168.233.233
VITE_BASE_API = '/dev-api'

# 开发环境启用 cdn eruda 调试工具。若不启用，将 true 修改为 false 或其他任意值即可
VITE_ENABLE_ERUDA = "true"

# 线上环境平台打包路径
VITE_PUBLIC_PATH = http://192.168.10.1

---

线上生产环境:

线上生产环境的链接和打包路径通常是不同的。

• VITE_BASE_API：这是指向后端 API 的基础 URL，通常用于应用程序与后端服务器通信。在你的例子中，它指向 http://192.168.10.7:8881/，这通常是一个内部或开发环境的地址。
• VITE_PUBLIC_PATH：这是静态资源的公共路径，用于线上环境中访问静态文件。在你的例子中，它指向 http://8.154.36.180:8903，可能是一个用于托管静态资源的 CDN 或服务器。

Vite多环境配置与打包:

1. 安装依赖

npm install --save-dev cross-env

npm install --save-dev cross-env 命令用于安装 cross-env 这个工具，并将其作为开发依赖添加到你的项目中。下面是更详细的说明：

cross-env 的用途

• 跨平台环境变量设置：

cross-env 允许你在不同操作系统（如 Windows 和 Unix/Linux）上统一设置环境变量。因为在 Windows 和 Unix 系统中设置环境变量的方式不同，使用 

cross-env 可以避免这些差异。

• 常用场景：通常在 package.json 的 scripts 部分使用，用于设置环境变量后执行特定的命令。

示例:

在 package.json 中的 scripts 部分，你可能会看到类似的命令：

"scripts": {
  "start": "cross-env NODE_ENV=development node server.js",
  "build": "cross-env NODE_ENV=production webpack"
}

这意味着无论在 Windows 还是 Unix 系统上，你都可以使用 npm run start 或 npm run build 来启动开发或生产环境，而不必担心操作系统的差异。

如何检查项目中是否配置了 cross-env(忽略):

1.查看 package.json：

• 打开项目根目录下的 package.json 文件，检查 devDependencies 是否包含 cross-env：

2..使用命令行：

• 运行以下命令查看所有安装的包，包括开发依赖：

npm ls --dev

• 在输出中查找 cross-env，如果找到了，说明项目已经配置了这个工具。

2. 配置环境变量

在项目根目录下创建 .env 文件，分别为不同环境创建不同的环境变量配置。例如：

• .env.development：开发环境
• .env.production：生产环境

在这些文件中，可以设置不同的环境变量

.env.development:

VITE_BASE_API = "http://192.168.10.7:8881"
# 开发环境启用 cdn eruda 调试工具。若不启用，将 true 修改为 false 或其他任意值即可
VITE_ENABLE_ERUDA = "true"

# 开发联调打包路径
VITE_PUBLIC_PATH = http://192.168.10.7

.env.production:

# 线上生产环境
# baseUrl
VITE_BASE_API = "http://192.168.10.7:3000"

# 线上环境平台打包路径
VITE_PUBLIC_PATH = "http://192.168.10.7:3001"

# 生产环境是否启用 cdn
VITE_CDN_DEPS = "false"

3. 应用环境变量

在项目中，你可以通过 import.meta.env 访问这些环境变量。

在login登录页的时候,启动的时候可以打印到控制台查看运行的环境

// 在 Vue 组件或任何 JS 文件中

console.log(import.meta.env.MODE);

这个文件是自动生成的,后面会详细解释

4. 运行和构建项目

使用不同的环境变量运行和构建项目。在命令行中，你可以通过 --mode 选项指定环境。

# 开发环境
vite --mode development

# 生产环境
vite build --mode production

或者，可以在 package.json 的脚本中自定义不同的命令，以便更方便地运行和构建。

// package.json
{
  "scripts": {
    "dev": "vite --mode development",
    "build:dev": "vite build --mode development",
    "build:prod": "vite build --mode production"
  }
}

然后，你可以使用 npm 或 yarn 运行这些脚本：

npm run dev
npm run build:dev
npm run build:prod

后续打包上线的时候,服务器那边会帮忙处理,到此就处理完了

---

5.Axios的配置:

配置baseURL:

之前已经配置过生产环境和开发环境了,baseURL会根据环境自动匹配

// 默认 axios 实例请求配置
const configDefault = {
  headers: {
    "Content-Type": ContentTypeEnum.FORM_URLENCODED
  },
  timeout: 0,
  baseURL: import.meta.env.VITE_BASE_API
};

这里给出模版:

import Axios, {
  type AxiosInstance,
  type AxiosError,
  type AxiosResponse,
  type AxiosRequestConfig
} from "axios";
import { ContentTypeEnum, ResultEnum } from "@/enums/requestEnum";
import NProgress from "../progress";
import { showFailToast } from "vant";
import "vant/es/toast/style";
import { useUserStore } from "@/store";

// ContentTypeEnum
// 默认 axios 实例请求配置
//  || ContentTypeEnum.FORM_URLENCODED
// || "application/json"
const configDefault = {
  headers: {
    "Content-Type": ContentTypeEnum.FORM_URLENCODED
  },
  timeout: 0,
  baseURL: import.meta.env.VITE_BASE_API
};

class Http {
  // 当前实例
  private static axiosInstance: AxiosInstance;
  // 请求配置
  private static axiosConfigDefault: AxiosRequestConfig;

  // 请求拦截
  private httpInterceptorsRequest(): void {
    Http.axiosInstance.interceptors.request.use(
      config => {
        NProgress.start();
        const userStore = useUserStore();
        const token = userStore.token;
        // 发送请求前，可在此携带 token
        if (token) {
          config.headers["token"] = token;
        }
        return config;
      },
      (error: AxiosError) => {
        showFailToast(error.message);
        return Promise.reject(error);
      }
    );
  }

  // 响应拦截
  private httpInterceptorsResponse(): void {
    Http.axiosInstance.interceptors.response.use(
      (response: AxiosResponse) => {
        NProgress.done();
        // 与后端协定的返回字段
        const { code, data } = response.data;
        // const { msg } = response.data;

        // const { message } = response.data;
        // 判断请求是否成功
        const isSuccess =
          data &&
          Reflect.has(response.data, "code") &&
          code === ResultEnum.SUCCESS;
        if (isSuccess) {
          return response.data;
        } else {
          // 处理请求错误
          // showFailToast(msg);
          return Promise.reject(response.data);
        }
      },
      (error: AxiosError) => {
        NProgress.done();
        // 处理 HTTP 网络错误
        let message = "";
        // HTTP 状态码
        const status = error.response?.status;
        switch (status) {
          case 400:
            message = "请求错误";
            break;
          case 401:
            message = "未授权，请登录";
            break;
          case 403:
            message = "拒绝访问";
            break;
          case 404:
            message = `请求地址出错: ${error.response?.config?.url}`;
            break;
          case 408:
            message = "请求超时";
            break;
          case 500:
            message = "服务器内部错误";
            break;
          case 501:
            message = "服务未实现";
            break;
          case 502:
            message = "网关错误";
            break;
          case 503:
            message = "服务不可用";
            break;
          case 504:
            message = "网关超时";
            break;
          case 505:
            message = "HTTP版本不受支持";
            break;
          default:
            message = "网络连接故障";
        }

        console.log(message);

        showFailToast(message);
        return Promise.reject(error);
      }
    );
  }

  constructor(config: AxiosRequestConfig) {
    Http.axiosConfigDefault = config;
    Http.axiosInstance = Axios.create(config);
    this.httpInterceptorsRequest();
    this.httpInterceptorsResponse();
  }

  // 通用请求函数
  public request<T>(paramConfig: AxiosRequestConfig): Promise<T> {
    const config = { ...Http.axiosConfigDefault, ...paramConfig };
    return new Promise((resolve, reject) => {
      Http.axiosInstance
        .request(config)
        .then((response: any) => {
          resolve(response);
        })
        .catch(error => {
          reject(error);
        });
    });
  }
}

export const http = new Http(configDefault);

在vite.config中配置跨域(开发环境使用)

    server: {
      host: true,
      // 仅在 proxy 中配置的代理前缀， mock-dev-server 才会拦截并 mock
      // doc: https://github.com/pengzhanbo/vite-plugin-mock-dev-server
      proxy: {
        "^/dev-api": {
          target:
            // "http://127.0.0.1:4523/m1/4869431-0-default" ||
            "http://192.168.10.7:8881",
          // 作用: 设置是否更改请求头中的 Origin 字段。
          // 默认 false。设置为 true 可以解决跨域问题。
          changeOrigin: true,

          // 作用: 重写请求路径。
          // 在这个例子中, 它会将 / dev - api 开头的路径替换为空字符串,
          // 即去掉 / dev - api 前缀。这样可以让实际请求的路径与配置的路径匹配。
          rewrite: path => path.replace(/^\/dev-api/, "")
        }
      }
    },

// 创建 axios 实例，设置基础配置
const request = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL, //根据环境自动匹配
  timeout: 10000, // 请求超时的毫秒数
  withCredentials: false // 跨域请求时不使用凭证
});

在文章的开头已经给出,使用/dev-api会被转发:

# baseUrl 
# /dev-api 为本地 mock 地址，不使用 mock 的话此处换为你的开发环境接口地址，例如 http://192.168.233.233
VITE_BASE_API = '/dev-api'

# 开发环境启用 cdn eruda 调试工具。若不启用，将 true 修改为 false 或其他任意值即可
VITE_ENABLE_ERUDA = "true"

# 线上环境平台打包路径
VITE_PUBLIC_PATH = http://192.168.10.1

6.其他说明

在 vite.config.ts中使用了defineConfig 函数来定义构建选项。

export default defineConfig(({ mode }) => ({
  build: {
    rollupOptions: {
      output: {
        chunkFileNames: "static/js/[name]-[hash].js",
        entryFileNames: "static/js/[name]-[hash].js",
        assetFileNames: "static/[ext]/[name]-[hash].[ext]"
      }
    }
  }
}));

• 默认环境：如果你没有在命令行中通过 --mode 参数显式指定模式，当你运行 vite build 时，默认情况下，Vite 将会使用 production（生产） 模式。
• 在 production 模式下，Vite 会进行优化，以确保生成的构建文件适合生产环境。

可以通过在命令行中指定 --mode 参数来切换到其他环境，例如开发环境。

---

ImportMetaEnv 和 ImportMeta:

ImportMetaEnv 和 ImportMeta 这些接口通常是在使用 Vite 和 TypeScript 时自动生成的。它们是 Vite 提供的类型定义，旨在帮助开发者在项目中更好地使用环境变量和模块功能。

具体情况:

1. 自动生成：当你创建 Vite 项目时，Vite 会自动生成相关的类型定义文件，以便 TypeScript 能够正确识别 import.meta 对象的属性。
2. 类型安全：这些接口提供了类型安全的方式来访问环境变量和其他模块元数据，减少了运行时错误的可能性。
3. 更新：如果你更改了 Vite 配置中的环境变量，重新启动开发服务器后，这些类型定义会自动更新，以反映最新的配置。

接口详解:

1.ImportMetaEnv:

• 描述了环境变量的类型。它可以包含任意数量的键值对，但至少有以下几个属性：
  • SSR: 布尔值，指示是否启用服务端渲染。
  • PROD: 布尔值，指示是否在生产模式。
  • DEV: 布尔值，指示是否在开发模式。
  • MODE: 当前运行模式（如 development 或 production）。
  • BASE_URL: 应用的基础 URL。

2.ImportMeta:

• 描述了模块的元数据，包括：
  • glob: 动态导入多个模块的函数。
  • env: 当前环境变量的信息，类型为 ImportMetaEnv。
  • hot: 可选属性，用于热模块替换（HMR）。
  • url: 当前模块的完整路径。

模版:

interface ImportMetaEnv {
  [key: string]: any
  BASE_URL: string
  MODE: string
  DEV: boolean
  PROD: boolean
  SSR: boolean
}

interface ImportMeta {
  // 当前模块的 URL，指向模块文件的完整路径
  url: string;

  // 可选属性，用于支持热模块替换 (HMR)
  // 如果启用 HMR，该属性提供一个上下文对象
  readonly hot?: import('./hot').ViteHotContext;

  // 当前环境变量的信息
  // 包含构建时或运行时的环境配置，如 API URL、版本号等
  readonly env: ImportMetaEnv;

  // 动态导入多个模块的函数
  // 与 glob 模式结合使用，允许批量加载模块
  glob: import('./importGlob').ImportGlobFunction;
}

使用示例:

在 Vite 项目中，可以直接使用这些接口来访问环境变量和模块信息。

// 假设在你的 TypeScript 文件中


// 访问环境变量

const apiUrl = import.meta.env.VITE_BASE_API; // 访问基础 API URL

const isDev = import.meta.env.DEV; // 判断是否在开发模式


// 打印环境信息

console.log(`API URL: ${apiUrl}`);

console.log(`Is Development: ${isDev}`);


// 使用 HMR（如果启用）

if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    // 处理热更新
    console.log('Module updated:', newModule);
  });
}


// 使用动态导入

const loadComponent = async () => {
  const module = await import.meta.glob('./components/*.vue'); // 动态加载所有 Vue 组件
  console.log(module);
};
loadComponent();

关于默认模式的说明:

前面提到,默认是生产环境指的是打包的默认模式:

1.开发模式：

• 当你运行 vite 命令或 npm run dev 时，Vite 默认使用开发模式。这是因为开发命令通常用于启动开发服务器，帮助开发者实时预览和调试应用。

2.生产模式：

• 当你运行 vite build 时，Vite 默认会使用生产模式来构建应用。这里的 "默认" 指的是在没有显式指定 --mode 参数的情况下，Vite 会将 NODE_ENV 设置为 production。

总结

• 开发命令（如 npm run dev）默认使用开发模式。
• 构建命令（如 vite build）默认使用生产模式。

这两者并不冲突。在开发过程中，通常使用开发模式，而在构建生产版本时，Vite 则使用生产模式。

运行的时候默认是开发环境

如果你的 Vite 项目默认使用开发环境，通常是因为以下几个原因：

1.未指定环境模式

• 默认情况下，当你运行 vite 或 vite build 命令时，如果没有显式指定 --mode 参数，Vite 会将 NODE_ENV 设置为 development。
• 例如，运行以下命令时：

npm run dev

这将启动开发服务器，默认使用开发模式。

package.json 脚本配置

• 在 package.json 中，可能会有类似以下的脚本：

"scripts": {
  "dev": "vite",  // 启动开发服务器
  "build": "vite build"  // 构建生产版本
}

• 运行 npm run dev 会启动开发服务器，并使用开发环境。

2.vite.config.js 配置

• 如果在 vite.config.js 中没有特别配置以指定环境，Vite 将默认为开发模式。
• 可以查看 vite.config.js，确认是否有设置 mode 的代码。

3.环境变量文件

• Vite 支持使用环境变量文件（如 .env, .env.development, .env.production）来设置不同的环境变量。
• 如果没有 .env.production 文件，或者在构建时没有指定 --mode production，则默认使用开发环境的配置。

4.命令行参数

• 如果希望在构建时使用生产环境，可以使用：

npm run build -- --mode production

总结

项目默认是开发环境，通常是因为没有显式指定其他环境模式。可以通过查看 package.json、vite.config.js 和环境变量文件来确认和修改环境配置。