未捕获的 ReferenceError：使用 laravel-mix webpack 时未定义 Vue

Posted 2023-02-22

【中文标题】未捕获的 ReferenceError：使用 laravel-mix webpack 时未定义 Vue

【英文标题】：Uncaught ReferenceError: Vue is not defined when using laravel-mix webpack

【发布时间】：2019-01-06 11:03:12

【问题描述】：

我正在使用 laravel-mix 和 webpack 来包含 Vue，但它总是会导致这个错误：

Uncaught ReferenceError: Vue is not defined

我使用这个命令编译文件：

npm 运行开发

我从这个文件编译 Vue： webpack.mix.js

let mix = require('laravel-mix');

mix.webpackConfig(
    externals: 
        'vue':'Vue',
        'vuejs-dialog': 'VuejsDialog'
    
);

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');

我用它来包含在我的 html 文件中：

<script src=" URL::asset('js/app.js') "></script>

package.json

    
    "private": true,
    "scripts": 
      "dev": "npm run development",
      "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
      "watch": "npm run development -- --watch",
      "watch-poll": "npm run watch -- --watch-poll",
      "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
      "prod": "npm run production",
      "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    ,
    "devDependencies": 
      "axios": "^0.18",
      "bootstrap": "^4.0.0",
      "popper.js": "^1.12",
      "cross-env": "^5.1",
      "jquery": "^3.2",
      "laravel-mix": "^2.0",
      "lodash": "^4.17.4",
      "vue": "^2.5.7"
    ,
    "dependencies": 
      "axios": "^0.18.0",
      "vuedialog": "^1.0.0"
    
  

资源/资产/js/app.js

/**
 * First we will load all of this project's javascript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue(
    el: '#app'
);

我已经尝试过这种方法，但它仍然给了我未定义的错误： https://laravel.com/docs/5.6/mix#working-with-scripts

我应该怎么做才能修复它？ 希望可以有人帮帮我。谢谢。

【问题讨论】：

出于某种原因，您已将 vue 声明为外部。这意味着 webpack (mix) 会期望它被外部加载，例如来自 CDN

我有一个 node_modules 文件夹，它不是从那里加载的吗？

如果它在 externals 对象中则不会

我明白了。那么如何使用 webpack 包含来自 node_modules 的 vue？

从 externals 对象中删除它，然后如果 webpack 遇到 require('vue') 或 import Vue from 'vue' 它将知道在 node_modules 中查找 vue 而不是期望它是外部定义的。

【参考方案1】：

需要在实际的应用程序脚本中使用 Vue。您当前导入 Vue 的位置在 mix config 文件中，该文件用于生成构建文件。

查看 Laravel 存储库中的 app.js：

https://github.com/laravel/laravel/blob/master/resources/assets/js/app.js

'resources/assets/js/app.js'需要：

window.Vue = require('vue');
const app = new Vue(
    el: '#app'
);

由于您使用的是 Laravel Mix，您应该使用 mix 函数包含捆绑资产：

<script src=" mix('/js/app.js') "></script>

【讨论】：

感谢您的回复。我忘了提到我有 node_modules 文件夹，其中包含 Vue、webpack 和 laravel-mix。我刚刚使用 npm run dev 编译，所以我的 app.js 中有一个来自 webpack.mix.js 的编译文件，其中包含：window.Vue = __webpack_require__(36);

您已将 Vue、WebPack 和 Mix 捆绑到 app.js 文件中？

编译好的app.js在public目录下，而你说的app.js也在resources目录下。

你能发布你的resources/assets/js/app.js吗？

当然！我刚刚发布了我的 app.js。这是在我安装 npm 时生成的。

【参考方案2】：

只需从定义app.js 的script 标记中删除defer 属性即可解决此错误。

【讨论】：

你能解释更多吗？