Question

我正在使用Symfony 4和Webpack Encore（它应该是新的Assetic（参见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>

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

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

未捕获的ReferenceError：未定义Vue at Object ../ node_modules / babel-loader / lib / index.js？{“cacheDirectory”：true}！./ node_modules / vue-loader / lib / selector.js？type = script＆amp; 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再现的初学者：/

Answer 1

您需要在Vue中导入index.vue。在脚本import Vue from 'vue'

的顶部添加此项

Symfony 4 + Webpack再现 - Vue未定义

1 个答案: