vue 引入第三方js报错undefined

今天在项目中使用到高德地图,在本地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

你可能感兴趣的:(vue)