这是当前的 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {viteMockServe} from "vite-plugin-mock";
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      vue(),
      viteMockServe({
        // ↓解析根目录下的mock文件夹
        mockPath: "./mock",
        // localEnabled: env.VITE_API_CLOSE_MOCK === undefined || env.VITE_API_CLOSE_MOCK !== 'YES',  // 开发打包开关
        prodEnabled: false, // 生产打包开关
        supportTs: false, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。
        // watchFiles: true, // 监视文件更改
      }),
      AutoImport({
          resolvers: [ElementPlusResolver()],
      }),
      Components({
          resolvers: [ElementPlusResolver()],
      }),
  ],
})

为了 更加灵活的配置 我们使用箭头函数, 并返回 conifg,在此之前,我们先创建一个/src/core/config.js:

const config = {
    appName : 'OJS',
    // appLogo: 'https://www.com/img'
    showViteLogo : true,
}

export const viteLogo = (env) =>{
    if(config.showViteLogo){
        console.log(`>>>>>> 欢迎使用 ${env.VITE_APP_NAME}系统`)
        let enviStr = '生产环境'
        if (env.VITE_MODE_NAME === 'dev'){
            enviStr = '开发环境'
        }else if(env.VITE_MODE_NAME === 'test'){
            enviStr = '测试环境'
        }
        console.log(`>>>>>>  当前环境为:${enviStr}`)
        console.log(`>>>>>>  接口地址为:${env.VITE_API_HOST}`)


    }
}

export default config

再把 vite.config.js 改成如下:

import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import {viteMockServe} from "vite-plugin-mock";
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import {viteLogo} from "./src/core/config.js";
import path from "path";

export default({command,mode})=>{
    const env  = loadEnv(mode, process.cwd());
    viteLogo(env)

    const timestamp = Date.parse(new Date());
    const config = {
        plugins: [
            vue(),
            //按需引入
            AutoImport({
                resolvers: [ElementPlusResolver()],
            }),
            Components({
                resolvers: [ElementPlusResolver()],
            }),
            viteMockServe({
                // ↓解析根目录下的mock文件夹
                mockPath: "./mock",
                localEnabled: env.VITE_MODE_NAME === 'dev',  // 开发打包开关
                // prodEnabled: false, // 生产打包开关
                supportTs: false, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。
                // watchFiles: true, // 监视文件更改
            }),
        ],
        resolve: {
            // ↓路径别名，主要是这部分
            alias: {
                "@": path.resolve(__dirname, "./src")
            }
        },
    }
    //如果是test模式或者prod模式 需要配置跨域 与后端的服务器地址进行通信
    if(env.VITE_MODE_NAME === 'test' || env.VITE_MODE_NAME === 'prod'){
        console.log(`>>>>>> 跨域配置已开启!`)
        config.server={
            proxy: {
                '/api': {
                    target: env.VITE_API_HOST,    // 目标接口前缀
                    //ws: true,       //  代理webscoked
                    changeOrigin: true,   // 开启跨域
                    rewrite: (path) => path.replace(//api/, '')  // 路径重写
                }
            }
        }
    }
    return config;
}

在开发环境下 command 的值为 serve（在 CLI 中， vite dev 和 vite serve 是 vite 的别名），而在生产环境下为 build（vite build）。

ssrBuild 仍是实验性的。它只在构建过程中可用，而不是一个更通用的 ssr 标志，因为在开发过程中，我们唯一的服务器会共享处理 SSR 和非 SSR 请求的配置。某些工具可能没有区分浏览器和 SSR 两种构建目标的命令，那么这个值可能是 undefined，因此需要采用显式的比较表达式。

效果

这样可以在测试环境和生产环境的时候, 实现跨域,同时每次运行项目的时候,可以得到终端的输出提示. 可以看到当前的环境变量 等信息.