laravel - 使用 vueJS laravel 包含 JS 库

标签 laravel vue.js webpack

我正在将 vue-cli 与 webpack 和 Laravel 结合使用。 在我的 app.blade.php 中从 cdn 加载 jQuery 文件(如 jQuery)可以正常工作,但我不想包含来自 cdn 的文件...

使用

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

在 app.js 中不起作用。当在我的浏览器中查看编译后的 app.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');

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

最佳答案

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

例如。在你的 app.js 中:

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

如果你想全局使用 jQuery,你必须将它分配给一个全局变量,如下所示:

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

请参阅 npm package documentation有关使用的更多信息。

关于laravel - 使用 vueJS laravel 包含 JS 库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54628359/

相关文章:

reactjs - TypeScript + VSCode 中的自定义模块分辨率

routes - 带有通配符的 Laravel 路由总是 404

php - 在 Laravel 中将数据导出到 Excel

vue.js - Vue语法错误

javascript - CORS 策略 : Response to preflight request doesn't pass access control check

vue.js - Nuxt 3 动态页面更改 Url 但它不会更改内容并且只获取一次数据

使用 Webpack 的 CSS 模块

php - MySQL 数据库表中的 90 列

php - Laravel 5.2.11, session 不工作,未设置 session cookie

javascript - Webpack 库输出