如何使用 vue-server-renderer 在 vue 中使用 ssr 支持的包？

Question

我尝试使用 vue2-google-maps，效果很好。突然我的电脑停止工作，然后我重新启动了我的电脑。然后，奇怪的是，500-error 出来了。

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

即使当我导入 vue2-google-maps 然后它发生 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错误？

环境：Ubuntu18.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

如何使用 vue-server-renderer 在 vue 中使用 ssr 支持的包？

How to use ssr supported packages in vue with vue-server-renderer?

vue.js

server-side-rendering