我正在将vue-cli与webpack和Laravel一起使用。 在我的app.blade.php中从cdn加载jQuery之类的js文件是可以的,但我不想包含来自cdns的文件...
使用
(odd)
app.js中的无法正常工作。当在我的浏览器中查看编译的app.js时,似乎已导入jQUery,但出现错误,提示“ $未定义”。
对于我要在vue应用程序中添加的每个js / css文件,这都是相同的。
app.blade.php:
require('@/js/assets/jquery.js');
webpack.mix.js:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{csrf_token()}}">
<title>MTM</title>
<link href=" {{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<app></app>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
app.js
const mix = require('laravel-mix');
mix.webpackConfig({
resolve:{
extensions:['.js','.vue'],
alias:{
'@': __dirname + '/resources'
}
}
})
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
答案 0 :(得分:1)
您只需导入模块本身,但是如果要在app.js模块中与$
一起使用它,则需要将jQuery分配给变量。
例如。在您的app.js中:
var $ = require('@/js/assets/jQuery.js');
如果要全局使用jQuery,则必须将其分配给这样的全局变量:
window.$ = window.jQuery = require('@/js/assets/jQuery.js');
有关用法的更多信息,请参见npm package documentation。
答案 1 :(得分:1)
我在Laravel,Vue和JQuery中遇到了类似的问题。对我而言,此修复程序是使用npm install jquery
安装JQuery,然后编辑webpack.mix.js文件以将其复制到我的公共js文件夹中,例如...
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.copy('node_modules/jquery/dist/jquery.min.js', 'public/js')
app.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{csrf_token()}}">
<title>MTM</title>
<link href=" {{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<app></app>
</div>
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('/js/jquery.min.js') }}"></script>
</body>
</html>
答案 2 :(得分:0)
您可能需要指定webpack来加载jQuery,并且有一些方法可以使用
在webpack.config.js
内
mix.webpackConfig(webpack => {
return {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
})
]
};
});
在npm install jquery
或yarn add jquery
旁边
,然后在您的app.js
文件中添加
global.$ = global.jQuery = require('jquery');
答案 3 :(得分:0)
使用var $ = require('@ / js / assets / jQuery.js');没有任何改变..
这是我完整的app.js文件:
import './bootstrap'
import Vue from 'vue'
import vueResource from 'vue-resource'
import Routes from '@/js/routes.js'
import App from '@/js/views/App'
var $ = require('@/js/assets/jQuery.js');
Vue.config.productionTip = false
Vue.use(vueResource);
Vue.prototype.$env_uri = '';
export const notificationBus = new Vue();
export const deleteModalBus = new Vue();
export const appModalBus = new Vue();
export const loaderBus = new Vue();
new Vue({
el:'#app',
router: Routes,
render: h => h(App),
}).$mount('#app');
export default app;
获取错误:
__webpack_require__ http://api.mtm/js/app.js:20 ./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/views/EditFdr.vue?vue&type=script&lang=js& http://api.mtm/js/app.js:2957 __webpack_require__ http://api.mtm/js/app.js:20 ./resources/js/views/EditFdr.vue?vue&type=script&lang=js& http://api.mtm/js/app.js:50191 __webpack_require__ http://api.mtm/js/app.js:20 vue http://api.mtm/js/app.js:50153 __webpack_require__ http://api.mtm/js/app.js:20 js http://api.mtm/js/app.js:49748 __webpack_require__ http://api.mtm/js/app.js:20 js http://api.mtm/js/app.js:43038 __webpack_require__ http://api.mtm/js/app.js:20 0 http://api.mtm/js/app.js:50560 __webpack_require__