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

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

  •  0
  • 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 年前
        1
  •  2
  •   Majid Alaeinia georak    5 年前

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

        2
  •  1
  •   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>