vue 引入第三方js报错undefined

最新推荐文章于 2025-09-11 17:39:08 发布

原创最新推荐文章于 2025-09-11 17:39:08 发布 · 8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个关于高德地图在项目中打包时出现js未加载的问题，并详细记录了排查过程及解决方案。作者通过调整webpack配置，确保了高德地图资源在不同环境下正确加载。

今天在项目中使用到高德地图，在本地npm run dev运行起来没有问题，可是在打包发布到测试环境后，使用高德地图的界面就会报Amap undefined，按照自己原先的教程（vue2（webpack）调用amap高德地图及其UI组件和标记物）应该是没有问题的，其他项目也是这么用的，可是这次怎么不行了？然后F12打开刷新页面看了下，发现原来没有加载高德地图的js。额，可是为什么呢？之前的项目怎么就没有问题？想想应该是包的问题。

找到了两个打包文件：

webpack.dev.config.js关键部分如下：

new HtmlWebpackPlugin({
            title: '后台管理',
            filename: '../index.html',
            inject: false
        }),

而webpack.test.config.js关键部分如下：

 new HtmlWebpackPlugin({
            title: '后台管理',
            favicon: './td_icon.ico',
            filename: '../index.html',
            template: '!!ejs-loader!./src/template/index.ejs',//这个是编译是用到的模板，像高德地图之类的东西都放这里面才能打包进去
            inject: false
        })

那么重点就是在template配置项上了，原来，项目在npm run dev 的时候，走的是默认的项目根目录下的index.html。而在测试环境，用了ejs模板类型的index.ejs目录在./src/template/下。ok，那么找到index.ejs文件，将需要的高德地图js配置进去就可以了。

想要了解HtmlWebpackPlugin的，可以参考这个博客哦：https://segmentfault.com/a/1190000013883242