如何将 bootstrap 和 jquery 包含到 vue webpack-simple 模板中？

Posted 2023-02-22

【中文标题】如何将 bootstrap 和 jquery 包含到 vue webpack-simple 模板中？

【英文标题】：How include bootstrap and jquery to vue webpack-simple template?

【发布时间】：2018-06-13 06:35:35

【问题描述】：

我需要在我的 vue 应用上使用 bootstrap 3。我做以下事情：

 vue init webpack-simple
 npm install jquery bootstrap

在此之后我添加到 webpack.config.js

 module.exports = 
 ...
   plugins: [
       new webpack.ProvidePlugin(
           $: "jquery",
           jQuery: "jquery"
       ),
   ]
 

并添加到 src/main.js

 window.$ = window.jQuery = require('jquery')
 import 'bootstrap'

浏览器出错：

Uncaught ReferenceError: jQuery is not defined

我该如何解决这个问题？

更新：

我说了@Sandwell，但结果中没有 bootstrap.css。我在 src/main.js 中添加一行

 import Bootstrap from 'bootstrap/dist/css/bootstrap.css'

并得到 webpack 编译错误：

./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf 模块解析失败：意外字符 '' (1:0) 您可能需要适当的加载程序来处理此文件类型。 （此二进制文件省略了源代码） @ ./node_modules/css-loader!./node_modules/bootstrap/dist/css/bootstrap.css 6:4790-4842 @ ./node_modules/bootstrap/dist/css/bootstrap.css @ ./src/main.js @multi (webpack)-dev-server/client?http://localhost:8080webpack/hot/dev-server ./src/main.js

我在 webpack.config.js module.rules 中有加载器：

  
    test: /\.(png|jpg|gif|svg|ttf)$/,
    loader: 'file-loader',
    options: 
      name: '[name].[ext]?[hash]'
    
  

【参考方案1】：

对于 webpack 2

我为我的库做了一个供应商捆绑包。它应该以这种方式工作。

  module.exports = 
    entry: 
        app: 'path/to/initapp.js',
        vendor: ['jQuery', 'Bootstrap']
    
    output: 
      path: rootPath + 'public/',
      filename: 'js/[name].js'
    , 
    plugins: [
      new webpack.optimize.CommonsChunkPlugin(
        names: ['vendor']
      )
    ]
  

那么 jQuery 应该在 vendor.js 包中 不要忘记在你的 initapp.js 中导入它

import 'bootstrap';
import jQuery from 'jQuery'
window.jQuery = jQuery

您应该查看doc 了解更多详情

【讨论】：

桑德威尔，谢谢！你回应部分帮助我。我更新了我的问题

hydronitrogen.com/…你看到这个帖子了吗？