使用 vueJS laravel 包含 JS 库

我正在使用带有webpack和Laravel的vue-cli。在我的app.blade中从cdn加载jQuery等js文件.php正在工作，但我不想包含来自cdns的文件...

用

require('@/js/assets/jquery.js');

在应用程序中.js不起作用。当我查看兼容的应用程序时.js在我的浏览器中似乎导入了 jQUery，但我有一个错误说"$ 未定义"。

对于我尝试在我的 vue 应用程序中添加的每个 js/css 文件来说，这都是相同的。

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>
   </body>
   </html>

webpack.mix.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');

应用.js

require('@/css/Semantic-UI-CSS-master/semantic.css');
require('@/js/assets/jQuery.js');
require('@/js/assets/semantic.js');
require('@/js/assets/tablesort.js');

您只需导入模块本身，但如果您想在 app.js 模块中将其与$一起使用，则需要将 jQuery 分配给变量。

例如，在您的应用程序中.js：

var $ = require('@/js/assets/jQuery.js');

如果你想全局使用 jQuery，你必须把它分配给一个全局变量，如下所示：

window.$ = window.jQuery = require('@/js/assets/jQuery.js');

有关用法的详细信息，请参阅 npm 包文档。

我在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')

应用刀片.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>

Using var $ = require('@/js/assets/jQuery.js'(; 不会改变任何东西。

这是我的完整应用程序.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;

错误 a 得到：

__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__

您可能需要指定 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');

相关内容

最新更新

热门标签：