Включить библиотеку JS, используя vueJS laravel - PullRequest
0 голосов
/ 11 февраля 2019

Я использую vue-cli с webpack и Laravel.Загрузка js-файлов, таких как jQuery, из cdn в мой app.blade.php работает, но я не хочу включать мои файлы из cdns ...

, используя

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

в приложении.JS не работает.Когда я смотрю на app.js в моем браузере, кажется, что jQUery импортирован, но у меня появляется ошибка, в которой говорится: «$ is undefined».

Это то же самое для всех файлов js / css, которые я пытаюсьдобавить в мое приложение vue.

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');

app.js

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

Ответы [ 3 ]

0 голосов
/ 11 февраля 2019

Вам может потребоваться указать веб-пакет для загрузки 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');
0 голосов
/ 11 февраля 2019

Использование 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;

ошибка a get:

__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__
0 голосов
/ 11 февраля 2019

Вы просто импортируете сам модуль, но вам нужно назначить jQuery переменной, если вы хотите использовать его с $ в вашем модуле app.js.

Например.в вашем app.js:

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

Если вы хотите использовать jQuery глобально, вам нужно присвоить его глобальной переменной, например:

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

См. пакет npm документация для получения дополнительной информации об использовании.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...