Vue.js 如何在vue支持的chrome扩展中使用npm加载引导和依赖项_Vue.js_Npm_Google Chrome Extension_Vuex

Vue.js 如何在vue支持的chrome扩展中使用npm加载引导和依赖项

vue.js npm google-chrome-extension

Vue.js 如何在vue支持的chrome扩展中使用npm加载引导和依赖项,vue.js,npm,google-chrome-extension,vuex,Vue.js,Npm,Google Chrome Extension,Vuex,我正在学习如何使用webpack、vue和vuex创建一个简单的chrome扩展。当我试图找出如何使用突变来跟踪我的chrome扩展中的socket.io事件时，我遇到了在扩展中加载Bootstrap4的问题。我使用了node modules文件夹所在的路径，但我没有找到一个文件，无法加载引导。有人能帮我吗？我已经使用npm安装了引导程序 index.html <!DOCTYPE html> <html lang="en"> <head> <meta

我正在学习如何使用webpack、vue和vuex创建一个简单的chrome扩展。当我试图找出如何使用突变来跟踪我的chrome扩展中的socket.io事件时，我遇到了在扩展中加载Bootstrap4的问题。我使用了node modules文件夹所在的路径，但我没有找到一个文件，无法加载引导。有人能帮我吗？我已经使用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>


我是信使

我建议将

CopyWebpackPlugin

添加到您的网页包配置中，这样您就可以将节点模块拉入发行版

参考：

然后，您应该能够更新

href

以使用

dist

文件夹中的副本

href=“/css/bootstrap.min.css”

，因为您正在从

dist

加载扩展，href将是

“/css/bootstrap.min.css”

好的，谢谢。这意味着我将安装的所有依赖项都需要以相同的方式加载，对吗？我已经按照建议尝试将路径设置为

/css/bootstrap.min.css

，但问题仍然存在。dist文件夹中不存在css文件夹。

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