如何将bootstrap和jquery包含在vue webpack-simple模板中？-Java 学习之路

我需要在我的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'

并在浏览器中出错：

未捕获的ReferenceError：未定义jQuery

我怎么解决这个问题？

更新：

我说像@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：8080 webpack / 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

我为我的libs做了一个供应商包 . 它应该这样工作 .

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了解更多详情

回复于 2024-05-04T23:00:51+08:00

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

1 回答

相关问题