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

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