64.vue开发百度地图离线版（二）

1.基本上就是下面两个链接的内容，这里坐下记录

在vue文件中使用BMap一直报错，原因是在以模块化的方式构建应用的时候，在JS模块中是不能直接访问入口文件中的变量的（index.html），那么我们该如何在某个JS文件中导入入口的html中的变量呢？
例如：

 //离线的百度地图api
上一篇记录中的这段代码代表的是离线的百度api，那如何在vue文件（别的JS文件）中去使用这个变量呢？

image

两个方案：

1.用window对象保存BMap变量，实现HTML文件和JS文件间的变量传递
----index.html


//当要使用BMap的时候这样用：
----map.vue
var BMap = window.BMap//取出window中的BMap对象
var map = new BMap.Map("allmap"); // 创建Map实例

2.通过webpack的externals加载BMap使它可以通过require或import引入
----webpack.config.js
module.exports = {
/*此处省略了entry，output,modules等配置*/
  externals:{
    'BMap':'BMap'
  },
}
----map.vue
import BMap from 'BMap'
var map = new BMap.Map("allmap"); // 创建Map实例
----index.html

// 在这里一定要注意src前面没有点，如果在vue-router中设置了base的值，src前面有点的话，会导致页面的地图无法正常 的加载。
//注意这种方式引入的第三方的百度地图的库需要放在static文件夹下，放到src中如何进行引入还没有找到合适的方式，一直报 BMap 没有定义的错误，如果有知道的欢迎留言

2.Uncaught SyntaxError: Unexpected token <错误
是因为我把map需要的文件全部放在了static路径下

解决办法是将第三方依赖的 JS 文件放到 /static/utils 目录下，
引入路径也改成：

知识点的补充：

1、assets文件夹与static文件夹的区别

区别一：assets文件是src下的，所以最后运行时需要进行打包，而static文件不需要打包就直接放在最终的文件中了

区别二：assets中的文件在vue中的template/style下用../这种相对路径的形式进行引用，在script下必须用@import的方式引入而static下的文件在.vue中的任何地方都只要使用../这种相对路径的方式引入，

2、

（1）assets用来放置样式、静态图片，只要src下面的组件中用到的资源就放在assets中。

（2）static用来放没有npm包的第三方插件，字体文件。

（3）assets与components同级 components下的.vue引用静态文件时，相对路径为 ../assets/wapFront

3、vue如何引入其它静态文件：

（1）src目录下的资源只能import或require。

（2）想静态引入的话，建立一个与src同级的目录例如static，然后把静态资源放入该文件夹下，html的引入路径如下：./static/...（注：试过一定要放在static文件夹下，否则报错）

以上就是我在开发地图离线版的时候遇到的问题和解决方案，其中参考了很多大牛的方案，在这里也把我遇到的问题和解决方案记录一下，希望可以对大家有帮助。

https://www.cnblogs.com/penghuwan/archive/2017/06/05/6943260.html
https://www.jb51.net/article/150517.htm