vue项目中引入外部资源的方式

anyeyongzhou
75 阅读3分钟

vue版本vue3

1.背景

电网外包的项目中,前端需要使用思极地图,这就涉及到思极地图的资源加载问题,如何加载,什么时候加载,这里面有点门道

2.外网版本

其实电网的项目大多数是不会部署在外网的,因为这样也可能会造成生产环境数据的安全问题,但是如果有些项目必须部署在外网,比如我这个项目因为需要拿到某某研究所去现场演示做的功能,所以部署在一台台式机中(生产数据全部脱敏处理过),当需要演示的时候,插无线网卡,连接外网资源,只需要在前端的入口文件index.html中引入地图的资源

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- 外网思级地图 -->
    <script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
  </body>
</html>

当然,还需要申请appKey和appSecret用于登陆

2.子网第一个版本

子网就是开发使用的终端机环境 首先终端机需要申请向信通申请访问子网思极地图的权限(将终端机的ip给运维,运维申请),如果没有申请到端口权限,将访问不到子网思极地图,申请后验证码终端机能不能访问的方式是:浏览器输入20.--.--.225(为了不泄密,这个地址我隐去部分),如果能访问到官方网站,说明终端机开通了权限 接下来需要在终端机的网络中心里面配置思极地图的代理,在host文件中配置地图的代理 最好在前端的index.html中加载外部的资源文件

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- 子网思级地图 -->
    <script src="https://20.--.--.225/maps?v=3.0.0"></script>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
  </body>
</html>

3.子网的第二个版本

项目开发完毕后,有一个对代码的黑白盒测试,因为黑盒测试中不允许在index.html中引入外部资源,意思就是不允许在html中使用script标签的形式引入外部资源. 但是资源肯定是要加载的,所以我们使用vue的一个第三方插件vue-jsonp来实现资源引入的功能

（1）安装

npm install vue-jsonp

（2）main.js中引入

当有多个组件都需要使用jsonp的时候，我们可以注册为全局变量

import { jsonp } from "vue-jsonp";
// 注册为全局变量
app.config.globalProperties.$jsonp=jsonp

（3）App.vue中加载思级地图资源

import { getCurrentInstance,onBeforeMount } from 'vue';

const { $jsonp } = getCurrentInstance()!.appContext.app.config.globalProperties;

onBeforeMount(() => {
    $jsonp('http://20.**.**.225/maps?v=3.0.0').then((res: any) => {
        console.log('err', res);
    });
});

至此，思级地图资源的引入工作就算完成了，而且页面地图也能正常展示

4.子网的第三个版本

在第二个版本使用一段时间后，发现在控制台中，有一个报错，{statusText: “Request Timeout“, status: 408},加载资源超时 在网上找了解决办法

$jsonp(
    'http://20.**.**.225/maps?v=3.0.0',
    {
        output: 'jsonp'
    }
).then((res: any) => {
    console.log('err', res);
});

但是在实际使用中，发现没有什么作用，浏览器还是会报错 所以需要想想其它的办法来引入资源文件，比如原始的JS来引入资源

var script = document.createElement('script');
script.src = "http://20.**.**.225/maps?v=3.0.0"
script.onload = function () {
    console.log('资源加载完毕');
};
script.onerror = function () {
    console.log('资源加载失败');
};
document.body.appendChild(script);

至此，完美的解决方案出现了 而且在后面的上监理和生产环境中，这个写法也没问题

avatar
文章
阅读
粉丝