首先将常量提出到静态配置文件中，方便后期修改时无需重新打包。

1. 在html文件的同级目录新建一个static文件夹，再在里面新建一个config.js文件；

2. 高德地图在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
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

详解GaussDB(DWS)中的行执行引擎

avatar 华为云开发者联盟
cover

第六届·2024 MindSpore 量子计算黑客松热身赛赛题解读

avatar 华为云开发者联盟
cover

带你熟悉CCE集群增强型CPU管理策略enhanced-static

avatar 华为云开发者联盟