nuxt · vue-amap
沒別的,只是想記錄nuxt.js與vue-amap的使用方法,甚至vue-baidumap。
首先,vue-amap是不支持SSR渲染的。這個估計官方也說了。
所以要用一種不走ssr的方法。
之前也試過直接在nuxt.config.js
里配置1
2
3
4{
src: '~plugins/amap.js',
ssr: false
}
結果發現還是不起效果,還報錯:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
解決方法就是:
> 很簡單,一個`<no-ssr>`即可。詳情點擊: [這裡](https://nuxtjs.org/api/components-no-ssr#the-lt-no-ssr-gt-component)
代碼:
```html
<no-ssr placeholder="Loading...">
<el-amap
:center="center"
:zoom="zoom"
:scrollWheel="false"
:vid="'amap-vue'">
<el-amap-marker vid="component-marker"
:position="center"></el-amap-marker>
</el-amap>
</no-ssr>