Symfony 4 + Webpack encore - Vue 未定义

Question

我正在使用带有 Webpack Encore 的 Symfony 4（应该是新的 Assetic (cf SensioLab)）。

但我有一个问题：/ 在每个页面上，我 link 两个脚本 app.js 和 app.css 由 Webpack 编译并包含我来自此 js 代码的所有库：

// CSS
// Libraries
require('font-awesome/css/font-awesome.css')
require('bootstrap/dist/css/bootstrap.css')

require('@css/elements/_nav.scss')
require('@css/app.scss')
require('@css/elements/_box.scss')

// JS
require('jquery')
require('vue')
require('axios')
require('bootstrap')

此外，我有一些页面有个人 js 和 css 文件。（除了 app.js 和 app.css），其中包含页面的配置。这些文件也是由 webpack 从 .vue 文件编译而来的。例如，我的 index.vue 文件是：

<script>
  import UpPage from '@components/up-page/page.vue'

  new Vue({
    el: "#media-container",
    delimiters: ["<%", "%>"],
    data: {
      media: [],
      nbMediaPerSearch: 20,
      canShowMedia: false
    },
    methods: {
      getMedia: function (nb) {
        let that = this;
        axios.get(Routing.generate("api_rest_page_get_page_media", {
          count: nb
        })).then(function (result) {
          let data = result.data;

          // Add media to media list
          if (data.length > 0)
            data.forEach(function (elt) {
              that.media.push(elt);
            });

          that.canShowMedia = that.media.length !== 0;
        }).catch(function (error) {
          console.error(error);
        })
      },
      openInNewTab: function (url) {
        let win = window.open(url, '_blank');
        win.focus();
      }
    },
    beforeMount() {
      this.getMedia(this.nbMediaPerSearch);
    }
  })
</script>

最终，我的 Twig 文件使用提供的 index.js 文件列出 #media-container 中的所有媒体（在 div 上使用 v-for 循环）

但是，当我尝试查看我的页面时，我遇到了这个错误：

Uncaught ReferenceError: Vue is not defined at Object../node_modules/babel-loader/lib/index.js?{"cacheDirectory":true}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./assets/vue/pages/user/my-page/index.vue (index.vue:16)

我在我的 app.js 中尝试过这样的事情：

let $ = require('jquery')
let Vue = require('vue')
let axios = require('axios')
let bootstrap = require('bootstrap')

但同样的问题：/ 我不知道是什么导致了这个问题，我是 webpack 和 webpack encore 的初学者：/

Answer 1

您需要在 index.vue 中导入 Vue。在脚本顶部添加此 import Vue from 'vue'

Symfony 4 + Webpack encore - Vue 未定义

Symfony 4 + Webpack encore - Vue is not defined

webpack

vue.js

vuejs2

webpack-encore