Question

在summernote中获取此错误。

TypeError：$（...）。summernote不是函数

Vue (version - 2.2.2), summernote (version - 0.8.4), webpack (version - 2.2.1),jQuery (version - 3.2.1)

App.vue

  <template>
      <div id="app">
        <textarea name="editor" id="editor" v-model="text"></textarea>
      </div>
    </template>

    <script>
    export default {
      name: 'app',
      data () {
        return {
          text: 'test'
        }
      },
      mounted: function(){
        $('#editor').summernote()
      }
    }
    </script>

main.js

  import Vue from 'vue'
    import App from './App.vue'
    import 'bootstrap/dist/css/bootstrap.css'
    import 'summernote/dist/summernote.css'
    import 'bootstrap'
    import 'summernote'

    new Vue({
      el: '#app',
      render: h => h(App)
    })

的index.html

  <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>test-app</title>
      </head>
      <body>
        <div id="app"></div>
        <script src="/dist/build.js"></script>
      </body>
    </html>

webpack.config.js

  var path = require('path')
    var webpack = require('webpack')

    module.exports = {
      entry: './src/main.js',
      output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
      },
      module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
              loaders: {
                'scss': 'vue-style-loader!css-loader!sass-loader',
                'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
              }
            }
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
          },
          {
            test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
            loader: 'file-loader'
          },
          {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
              name: 'picture/[name].[ext]?[hash]',
            }
          },
          {
            test: /\.css$/,
            loader: 'vue-style-loader!css-loader!sass-loader'
          }
        ]
      },
      resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js'
        }
      },
      devServer: {
        historyApiFallback: true,
        noInfo: true
      },
      performance: {
        hints: false
      },
      devtool: '#eval-source-map',
      plugins: [
        new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery',
          jquery: 'jquery'
        })
      ]
    }

Answer 1

有必要在summernote数据包中删除带有jQuery的文件夹“node modules”。因为它创建了两个Object Jquery。

Vue + summernote = TypeError：$（...）。summernote不是函数

1 个答案: