TypeError: c(...)(...).modal 不是构建 vue-cli 项目后的函数答案

【问题标题】：TypeError: c(...)(...).modal is not a function after built vue-cli projectTypeError: c(...)(...).modal 不是构建 vue-cli 项目后的函数
【发布时间】：2020-07-02 03:49:27
【问题描述】：

我是 vuejs 的新手。我正在使用 vue-cli 在 vue 项目中工作

我用npm install -g @vue/cli安装了vue vue/cli
我用vue init webpack my-project创建了一个项目
我用npm install jquery安装了jQuery
我用npm install materialize-css 安装了materialize-css
npm run dev 之后一切正常
但是当我执行 npm run buid 并运行 dist 目录中的 index.html 文件时，我在 chrome devtools 中收到此错误

Uncaught TypeError: c(...)(...).modal is not a function
    at HTMLDocument.<anonymous> (App.vue:20)
    at l (jquery.js:3557)
    at d (jquery.js:3625)

我的 main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import vueResource from 'vue-resource'
import store from './components/store/AuthStore'
import 'materialize-css'
import 'materialize-css/dist/css/materialize.min.css'

let currentUrl = window.location.href
let url = new URL(currentUrl)
let tokenFromUrl = url.searchParams.get('token')
let nameFromUrl = url.searchParams.get('name')
let avatarFromUrl = url.searchParams.get('avatar_link')

if (tokenFromUrl) {
  localStorage.setItem('token', tokenFromUrl)
  localStorage.setItem('name', nameFromUrl)
  localStorage.setItem('avatar_link', avatarFromUrl)
}

let token = localStorage.getItem('token') ? localStorage.getItem('token') : ''

Vue.config.productionTip = false
Vue.prototype.$hostname = (Vue.config.productionTip) ? 'https://ipaq-mobile.000webhostapp.com/traitement' : 'http://127.0.0.1:8000'
Vue.prototype.$avatar_link = localStorage.getItem('avatar_link')
Vue.use(vueResource)
Vue.http.options.root = (Vue.config.productionTip) ? 'https://ipaq-mobile.000webhostapp.com/traitement/api' : 'http://127.0.0.1:8000/api'
Vue.http.headers.common['Access-Control-Allow-Headers'] = 'Origin, Accept, Authorisation'
Vue.http.headers.common['Accept'] = 'application/json'
Vue.http.headers.common['Authorization'] = 'Bearer ' + token

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

我的应用程序.vue

<template>
  <div id="app">
    <div class="navbar">
      <router-view name="navbar" v-bind:pathName="pathName"/>
          <!-- <div @click="loadMore = !loadMore"><h1><a>loadMore</a></h1></div> -->
    </div>
    <SideNav></SideNav>
    <router-view name="main"></router-view>
  </div>
</template>

<script>
import SideNav from './components/TheSideNav'
import $ from 'jquery'

export default {
  name: 'App',
  mounted: function () {
    $(document).ready(function () {
      $('.modal').modal()
      $('.sidenav').sidenav()
    })
  },
  components: {
    SideNav
  },
  computed: {
    pathName () {
      return this.$route.name
    }
  }
}

</script>

<style>

</style>

我该如何解决这个问题？

【问题讨论】：

您包含的 jquery 库似乎缺少 modal()。也许这会引导你走向正确的方向stackoverflow.com/questions/36672304
感谢您的回复，但 stackoverflow.com/questions/36672304 没有帮助我。

标签： jquery webpack vuejs2 materialize vue-cli-4

【解决方案1】：

我的 build/webpack.dev.conf.js 中有这段代码

 new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })

build/webpack.prod.conf.js 中没有，所以我添加了它。

【讨论】：

【解决方案2】：

你需要一个http服务器，比如nginx。

【讨论】：

感谢您的回答。但我只是在 nginx 服务器上试了一下，还是出现了同样的错误。
我在你的conf文件中没有看到任何'server'段，你需要先正确配置nginx。