Webpack Symfony 4+；网页包encore-未定义Vue

我正在使用Symfony 4和网页包Encore（这应该是新的Assetic（cf SensioLab））

但我有一个问题：/ 在每个页面上，我链接两个脚本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>

但同样的问题是：/

---

我不知道是什么导致了这个问题，我是一个网页包和网页包encore的初学者：//

您需要在

index.Vue

中导入

Vue

。将此添加到脚本顶部

从“Vue”导入Vue

您需要在

index.Vue中导入
Vue
。在脚本顶部添加这个
从“Vue”导入Vue
是的，我想它会工作，但是如果我有一个app.js链接我的所有库，就不必在我的所有页面的所有.Vue文件中导入它们。如果我这样做，我的js文件将变大，浏览器缓存将无法正常工作：/。当我在.html.twig文件中直接使用VueJs时，我会怎么做？我无法正确配置，webpack可以将供应商库拆分为公共块，这意味着您的大小不会失控。不确定您在浏览器缓存中暗示的问题将在哪里发挥作用。您将如何在.html/.twig文件中直接使用VueJs？Vue是一个框架，而不是一种语言。在组件中导入库是你必须要做的。是的，我想它会起作用，但如果我有一个app.js链接我所有的库，那就不必在我所有的.vue文件和页面中导入它们。如果我这样做，我的js文件将变大，浏览器缓存将无法正常工作：/。当我在.html.twig文件中直接使用VueJs时，我会怎么做？我无法正确配置，webpack可以将供应商库拆分为公共块，这意味着您的大小不会失控。不确定您在浏览器缓存中暗示的问题将在哪里发挥作用。您将如何在.html/.twig文件中直接使用VueJs？Vue是一个框架，而不是一种语言。在组件中导入库是您必须做的事情。
let $ = require('jquery')
let Vue = require('vue')
let axios = require('axios')
let bootstrap = require('bootstrap')