首先将常量提出到静态配置文件中，方便后期修改时无需重新打包。
- 在html文件的同级目录新建一个static文件夹，再在里面新建一个config.js文件；
- 高德地图在2021.12月以后新申请的key必须要搭配安全密钥一起使用；
注意：这个设置必须是在 JSAPI 的脚本加载之前进行设置，否则设置无效。所以安全密钥在入口的 html 文件中引入，页面中正常使用key值即可。
<script type="text/javascript"> // 高德地图秘钥，必须在加载load.js文件之前 window._AMapSecurityConfig = { securityJsCode: '您申请的安全密钥' } </script>开发环境使用（本地秘钥）：
config.js：
var gloableConfig = {
"key": "请填写自己申请的高德地图key值", // 高德地图的key（配合秘钥使用的key）开发环境使用
"secretKey": "请填写自己申请的高德地图秘钥值", // 高德地图的秘钥（配合key使用的秘钥）开发环境使用
};
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>logo.png">
<title>系统名称</title>
<script src="./static/config.js"></script>
<script type="text/javascript">
// 高德地图秘钥，必须在加载JSAPI load.js文件之前
window._AMapSecurityConfig = {
securityJsCode: gloableConfig.secretKey // 开发环境使用
}
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
正式环境使用（Nginx配置）：
config.js：
const $gloableConfig = {
"key": "请填写自己申请的高德地图key值", // 高德地图的key（配合Nginx使用的key）正式环境使用
"serviceHost": '请填写自己配置的服务器地址 https://***********/_AMapService/v4/maps' // 高德地图秘钥的服务器地址（Nginx配置）正式环境使用
};
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>logo.png">
<title>系统名称</title>
<script src="./static/config.js"></script>
<script type="text/javascript">
// 高德地图秘钥，必须在加载JSAPI load.js文件之前
window._AMapSecurityConfig = {
serviceHost: gloableConfig.serviceHost // 正式环境使用
}
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
在页面中使用静态配置变量：
let key = $gloableConfig.key; // 从静态变量中获取常量值key
标签：
vue.js
本文转载自: https://blog.csdn.net/keke11211/article/details/124683754
版权归原作者 努力学习~冲鸭 所有， 如有侵权，请联系我们删除。
版权归原作者 努力学习~冲鸭 所有， 如有侵权，请联系我们删除。