首先我們需要下載一個插件

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