我在我的应用程序中使用 Nuxt3 + Vite + Leaflet + Bootstrap。该应用程序在开发中运行良好,但是当我尝试使用生成静态站点时npm run generate
,我收到以下错误:
类型错误:无法读取 null 的属性(读取“isCE”)
和
未捕获(承诺中)类型错误:无法读取 null 的属性(读取“namespaceURI”)
我认为这与我的插件文件有关。
这是我的 Nuxt3 配置文件:
plugins/nuxt.config.js
:
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
target: 'static',
css: [
'~/assets/global.scss'
],
router: {
base: '/'
}
})
leaflet.client.js
:
import L from 'leaflet'
import 'leaflet.markercluster';
import 'leaflet-fullscreen';
import 'leaflet-sidebar';
import 'leaflet.vectorgrid';
export default defineNuxtPlugin(nuxtApp => {
return {
provide: {
L
}
}
})
plugins/useBootStrap.client.ts
:
import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.provide('bootstrap', bootstrap)
nuxtApp.provide('Tooltip', bootstrap)
nuxtApp.provide('Carousel', bootstrap)
})
和我的 package.json:
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"@geoman-io/leaflet-geoman-free": "^2.13.0",
"@popperjs/core": "^2.11.6",
"@vue-leaflet/vue-leaflet": "^0.6.1",
"axios": "^0.27.2",
"bootstrap": "^5.2.0",
"https": "^1.0.0",
"leaflet": "^1.9.1",
"leaflet-fullscreen": "^1.0.2",
"leaflet-sidebar": "^0.2.4",
"leaflet.markercluster": "^1.5.3",
"leaflet.vectorgrid": "^1.3.0",
"topojson-client": "^3.1.0",
"vue-google-charts": "^1.1.0",
"vue-gtag": "^2.0.1"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.0.1",
"nuxt": "3.0.0-rc.11",
"sass": "^1.55.0",
"sass-loader": "^13.0.2",
"vite": "^3.0.9",
"vite-plugin-mkcert": "^1.9.0"
}
}