文章/答案/技术大牛

发布

社区首页 >问答首页 >Vue导入Vue扩展vue2-google-map出现错误

问Vue导入Vue扩展vue2-google-map出现错误
EN

Stack Overflow用户

提问于 2020-12-27 06:15:49

回答 1查看 101关注 0票数 0

我将一些基于vue2-google地图的组件移植到了一个全新的Laravel项目中。我导入了这个vue扩展，并在一些组件中使用它。但由于某些原因，我在Chrome中不断收到这样的错误：“未捕获ReferenceError: VueGoogleMaps未定义”，而我尝试的所有操作都无济于事。希望有人能给点建议。这很可能是一个我看不到的非常基本的错误。

我的主要Javascript文件app.js：

require('./bootstrap');

window.Vue = require('vue');

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
load: {
    key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    libraries: "places", // This is required if you use the Autocomplete plugin
},

installComponents: true,
});

Vue.component('edit-polygon', require('./components/EditPolygon.vue').default);
Vue.component('create-area', require('./components/CreateArea.vue').default);
Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
   el: '#test1',
});

我的html文件文件：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

       <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">



        <style>
            body {
               font-family: 'Nunito';
            }
        </style>
        <script src="{{ asset('js/app.js') }}" defer></script>
    </head>
    <body class="antialiased">
         <div id="test1">
            <example-component></example-component>
        </div>

    </body>
</html>

我的package.json：

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.2.1",
        "alpinejs": "^2.7.3",
        "autoprefixer": "^9.8.6",
        "axios": "^0.19",
        "cross-env": "^7.0.3",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "postcss-import": "^12.0.1",
        "resolve-url-loader": "^3.1.0",
        "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "gmap-vue": "^1.5.0",
        "vue": "^2.6.12",
        "vue2-google-maps": "^0.10.7"
    }
}

laravel

vue.js

vue-component

回答 1

Stack Overflow用户

发布于 2020-12-27 18:28:53

我解决了这个问题，尽管我不知道具体是怎么做到的：

删除了gmap-vue
installed gmap-vue，并使用npm
从gmap-vue而不是vue2-google-maps.

导入VueGoogleMaps。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65461172

复制

相似问题

问Vue导入Vue扩展vue2-google-map出现错误
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue导入Vue扩展vue2-google-map出现错误EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue导入Vue扩展vue2-google-map出现错误
EN