Vue-Cli

vue-cli 项目里我怎样引入地图脚本

• 首先在 public/index.html 文件里引入必要的地图库

<!-- yymap core -->
<link
  rel="stylesheet"
  href="https://deyihu-static-public-1300406971.cos.ap-shanghai.myqcloud.com/yymap@latest/dist/yy.min.css"
/>
<script
  type="text/javascript"
  src="https://deyihu-static-public-1300406971.cos.ap-shanghai.myqcloud.com/yymap@latest/dist/yy.min.js"
></script>
<!-- yymap gl render plugin -->
<script src="https://deyihu-static-public-1300406971.cos.ap-shanghai.myqcloud.com/yymap@latest/dist/yymap-gl.min.js"></script>
<!-- yymap 3d visual lib -->
<script
  type="text/javascript"
  src="https://deyihu-static-public-1300406971.cos.ap-shanghai.myqcloud.com/yymap-geovgl-new@latest/dist/yymap-geovgl.min.js"
></script>
<!-- yymap layercontrol -->
<script
  type="text/javascript"
  src="https://deyihu-static-public-1300406971.cos.ap-shanghai.myqcloud.com/yymap-layercontrol@latest/dist/yymap-layercontrol.min.js"
></script>

• 配置 vue.config.js

 configureWebpack: {
        externals: {
            //加上这行
            yymap: 'YY',
        },
    }

• 在你的业务代码里你就可以

import * as YY from 'yymap';

..........

为什么 vue-cli 打包大体积的数据容易内存溢出

vue-cli底层的打包工具是webpack,webpack 不怕文件多，就怕单个文件体积特别大，所以当你的一个 js/json 文件好几 M 的时候，且这个文件只是数据文件，你应当

• 把数据文件放到 public 目录下作为静态资源,因为静态的数据文件打包没有任何意义

• 通过传统的脚本的方式直接在 html 页面里引入，然后再你的业务代码里直接访问数据文件里的变量

<script type="text/javascript" src="/path/data.js"></script>

在你的业务代码里你就可以：

  //假设你data.js里的数据变量是:griddata
  console.log(window.griddata);

• 或者在你的业务代码里通过 ajax 动态请求

fetch("./data.json")
  .then((res) => res.json())
  .then((json) => {
    //do some things
  });