首先我们需要下载一个插件

vite-plugin-html

然后再项目最外层和index.html同级目录下新建.env.development和.env.production两个项目并且定义你想要的环境变量名:注意要以VITE_开头

VITE_APP_MAP_TOKEN=1233444

然后vite.config.js文件

import { defineConfig,loadEnv  } from 'vite';

import { createHtmlPlugin } from 'vite-plugin-html';

xport default defineConfig(({mode})=>{
 // 使用 loadEnv 加载环境变量，第二个参数是项目根目录路径，第三个参数是要匹配的前缀
 const env = loadEnv(mode, process.cwd(), 'VITE_')
 // console.log('Current Mode:', mode)
 // console.log('Map Token:', env.VITE_APP_MAP_TOKEN) // 应该能正常输出
 return{
  visualizer(),
  createHtmlPlugin({
   minify: true,
   inject: {
    data: {
     title: 'My App',
     MapToken: env.VITE_APP_MAP_TOKEN,
    }
   }
  }),
 ],

。。。。

}

index.htm里面使用

<script type="text/javascript" src="http://api.xxxx/api?v=4.0&tk=<%= MapToken %>" />

在vue的页面使用

const mapToken = import.meta.env.VITE_APP_MAP_TOKEN