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

在summernote中獲取此錯誤。

TypeError: $(...).summernote is not a function

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' 
     }) 
     ] 
    }

來源

2017-06-21 Maxim P.

有必要刪除summernote包的文件夾「節點模塊」與jQuery的。因爲它創建了兩個Object Jquery。

來源

2017-06-22 13:49:49

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

回答

相關問題