Bootstrap js 文件在 vue 3 options api 自定义元素中不起作用

Question

我正在尝试在 Vue 3 Options Api 自定义元素中使用 Bootstrap 5。我在正确加载引导程序时遇到问题。 这是我的

main.ts

文件：

import { defineCustomElement } from 'vue'
import 'bootstrap/dist/js/bootstrap.bundle'
import App from './App.ce.vue'

let element = defineCustomElement(App);

customElements.define("app-trackingsidebar", element);

和

vue.config.js

文件：

module.exports = {
    productionSourceMap: true,
    parallel: false,
    css: {
        extract: false,
    },
    configureWebpack: {
        entry: './src/main.ts',
        optimization: {
            splitChunks: false,
            minimize: false
        },
        resolve: {
            extensions: ['.ts', '.tsx', '.vue', '.js', '.json'],
        },
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    loader: 'ts-loader',
                    options: { appendTsSuffixTo: [/\.vue$/] },
                    exclude: /node_modules/,
                },
            ],
        },
    },

};

并且在我的

App.ce.vue

中，我还使用

bootstrap.min.css

元素顶部的链接元素加载

template

，但我下载了该文件的相关版本，并且我正在从我自己的服务器提供它并且它正在工作：

<template>
  <link href="<Link to bootstrap.min.css>" rel="stylesheet"
    crossorigin="anonymous">
- - - 
</template>

我的

package.json

文件：

{
  "name": "projectName",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@vue/web-component-wrapper": "^1.3.0",
    "@vueuse/core": "^10.5.0",
    "bootstrap": "^5.3.3",
    "vue-loader": "^16.8.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-typescript": "^5.0.8",
    "@vue/cli-service": "~5.0.0",
    "@vue/compiler-sfc": "^3.3.8",
    "ts-loader": "^9.5.0",
    "typescript": "^5.2.2",
    "vue": "^3.3.4"
  }
}

由于项目情况，我只能使用构建中的 js 文件。

Bootstrap 样式和类可以工作，因为

link

元素加载了

bootstrap.min.css

但我无法获得该功能，例如：我想使用手风琴并且样式可以工作，但是当我单击时手风琴本身不起作用在它们上，没有一个打开或关闭。

搜索参数和跟踪参数是手风琴的按钮，但它们看起来只是按钮并且不执行任何操作。

由于自定义元素是在 Shadow DOM 中渲染的，因此除了 CE 项目中的内容之外，我无法使用任何其他元素。

我已经确认我的构建文件中有 bootstrap js 代码，因为我的构建中有这样的代码以及一些 bootstrap 函数：

/*!
  * Bootstrap v5.3.3 (https://getbootstrap.com/)
  * Copyright 2011-2024 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */

/**
   * --------------------------------------------------------------------------
   * Bootstrap util/index.js
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   * --------------------------------------------------------------------------
   */

/**
   * --------------------------------------------------------------------------
   * Bootstrap dom/manipulator.js
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   * --------------------------------------------------------------------------
   */

/**
   * --------------------------------------------------------------------------
   * Bootstrap util/config.js
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   * --------------------------------------------------------------------------
   */

// and some more

这使我能够批准

bootstrap.bundle.min.js

文件已在项目中成功加载。我不明白为什么功能不存在并且手风琴无法工作。

Answer 1

在你的main.ts 导入 bootstrap.bundle.min 希望它有效