如何在 vue 驱动的 chrome 扩展中使用 npm 加载引导程序和依赖项答案

【问题标题】：How to load bootstrap and dependencies with npm inside vue powered chrome extension如何在 vue 驱动的 chrome 扩展中使用 npm 加载引导程序和依赖项
【发布时间】：2020-05-08 15:23:18
【问题描述】：

我正在学习如何使用 webpack、vue 和 vuex 创建一个简单的 chrome 扩展。当我试图弄清楚如何使用突变来跟踪我的 chrome 扩展中的 socket.io 事件时，我在扩展中加载 bootstrap 4 时遇到了问题。我使用了节点模块文件夹所在的路径，但是找不到文件并且无法加载引导程序。谁能帮我？我使用 npm 安装引导程序。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Here I'm Messenger</title>
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">

  <% if (NODE_ENV === 'development') { %>
  <!-- Load some resources only in development environment -->
  <% } %>
</head>
<body>
  <div id="app"></div>
  <script src="index.js"></script>
</body>
</html>

【问题讨论】：

因为你从dist加载扩展，所以href将是"/css/bootstrap.min.css"
好的，谢谢。这意味着我将安装的所有依赖项都需要以相同的方式加载对吗？
我已尝试按照建议将路径设置为/css/bootstrap.min.css，但问题仍然存在。 dist 文件夹中不存在 css 文件夹。

标签： vue.js npm google-chrome-extension vuex

【解决方案1】：

我建议将 CopyWebpackPlugin 添加到您的 webpack 配置中，以便您可以将节点模块拉入您的发行版中。

参考：https://webpack.js.org/plugins/copy-webpack-plugin/

const plugins = [
  new CopyWebpackPlugin(
    [
      { from: 'node_modules/bootstrap/dist/css/bootstrap.min.css', to: './dist/css/' },
    ],
  ),
];

然后您应该能够更新href 以使用您的dist 文件夹href="/css/bootstrap.min.css" 中的副本

【讨论】：