Jquery TypeError:c(…)(…)。modal不是生成vue cli项目后的函数
我是vuejs的新手。 我正在使用vue cli在vue项目中工作Jquery TypeError:c(…)(…)。modal不是生成vue cli项目后的函数,jquery,webpack,vuejs2,materialize,vue-cli-4,Jquery,Webpack,Vuejs2,Materialize,Vue Cli 4,我是vuejs的新手。 我正在使用vue cli在vue项目中工作 我使用npm安装-g@vue/cli 我使用vue init webpack我的项目创建了一个项目 我用npm安装jQuery 我用npm安装materialize css安装了materialize css npm运行dev后一切正常 但是,当我执行npm run buid并运行dist目录中的index.html文件时,我在chrome devtools中得到了这个错误 未捕获类型错误:c(…)(…)。模态不是函数 在H
- 我使用
npm安装-g@vue/cli
- 我使用
vue init webpack我的项目创建了一个项目
- 我用
npm安装jQuery
- 我用npm安装materialize css安装了materialize css
npm运行dev后一切正常
- 但是,当我执行
并运行dist目录中的index.html文件时,我在chrome devtools中得到了这个错误npm run buid
未捕获类型错误:c(…)(…)。模态不是函数
在HTMLDocument上。-->
从“./components/TheSideNav”导入SideNav
从“jquery”导入$
导出默认值{
名称:“应用程序”,
挂载:函数(){
$(文档).ready(函数(){
$('.modal').modal()
$('.sidenav').sidenav()
})
},
组成部分:{
侧导航
},
计算:{
路径名(){
返回此。$route.name
}
}
}
如何修复此问题?您需要一个http服务器,如nginx。我在构建/webpack.dev.conf.js时有此代码
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
它们不在build/webpack.prod.conf.js中,所以我添加了它。您包含的jquery库似乎缺少
modal()
。也许这会引导你走向正确的方向谢谢你的回复但是stackoverflow.com/questions/36672304对我没有帮助。谢谢你的回答。但我只是在一台nginx服务器上尝试了一下,仍然出现了同样的错误。我在您的conf文件中没有看到任何“服务器”段,您需要先正确配置nginx。
// 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/>'
})
<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>
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})