如何在vue中使用ssr支持的包和vue-服务器-呈现器？

Question

我试着使用vue2-google-maps，它运行得很好。突然，我的电脑停止工作，然后我重新启动我的电脑。然后，奇怪的是，500个错误出现了。

我恢复了所有与vue2-google地图相关的代码，然后我的项目运行良好。

即使当我导入vue2-google地图时，它也会出现500个错误。:(

App.js

import * as VueGoogleMaps from 'vue2-google-maps';

它运行得很好，但现在由于未知的原因，它被打破了.

这是我的控制台显示的错误。

webpack built 5410edae88d11b814c0b in 2690ms
error during render : /search
/media/bossminion/Work/WeMeet/frontend/node_modules/vue2-google-maps/dist/components/infoWindow.vue:3
<template>
^

SyntaxError: Unexpected token <
    at Module._compile (internal/modules/cjs/loader.js:720:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/media/bossminion/Work/WeMeet/frontend/node_modules/vue2-google-maps/dist/main.js:42:19)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at r (/media/bossminion/Work/WeMeet/frontend/node_modules/vue-server-renderer/build.dev.js:9295:16)
    at Object.<anonymous> (webpack:/external "vue2-google-maps":1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap a442baf8af813fadc2a4:25:0)
error during render : /favicon.ico
/media/bossminion/Work/WeMeet/frontend/node_modules/vue2-google-maps/dist/components/infoWindow.vue:3
<template>
^

SyntaxError: Unexpected token <
    at Module._compile (internal/modules/cjs/loader.js:720:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/media/bossminion/Work/WeMeet/frontend/node_modules/vue2-google-maps/dist/main.js:42:19)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at r (/media/bossminion/Work/WeMeet/frontend/node_modules/vue-server-renderer/build.dev.js:9295:16)
    at Object.<anonymous> (webpack:/external "vue2-google-maps":1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap a442baf8af813fadc2a4:25:0)

这是否有可能，项目的良好运作可能会导致500-错误，没有任何理由？

环境: Ubuntu 18.04，npm v6.9.0，节点v12.6.0

Answer 1

我找到了如何处理ssr。

App.js

if (process.browser) {
  const VueGoogleMaps = require('vue2-google-maps');
  Vue.use(VueGoogleMaps, {
    load: {
      key: 'myKey',
      libraries: 'places',
    },
  });
}

我没有使用import，而是在客户端呈现时使用了require。

如果能帮到你，我会很高兴的。:D