代码之家 › 专栏 › 技术社区 › maryyyyyyy

未捕获引用错误:使用laravel mix网页包时未定义Vue

laravel-mix vue.js webpack laravel

maryyyyyyy · 技术社区 · 6 年前

我使用laravel mix with webpack来包含Vue,但它总是导致以下错误:

未捕获的引用错误:未定义Vue

npm运行开发

我从以下文件编译Vue: 网页包.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');

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

包.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"
    }
  }

/**
 * 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

我该怎么做才能修好它? 希望有人能帮我。非常感谢。

1 回复 | 直到 4 年前

Majid Alaeinia georak 5 年前

只需删除 defer 属性 script 定义 app.js .

Brian Lee 6 年前

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

看这里的 app.js 在Laravel存储库中:

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

因为您使用的是laravelmix,所以应该使用 mix

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