Symfony 4 + Webpack encore - 未定义 Vue

Posted 2023-02-23

【中文标题】Symfony 4 + Webpack encore - 未定义 Vue

【英文标题】：Symfony 4 + Webpack encore - Vue is not defined

【发布时间】：2018-07-05 11:29:21

【问题描述】：

我正在使用带有 Webpack Encore 的 Symfony 4（应该是新的 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>

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

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

Uncaught ReferenceError: Vue is not defined 在 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 的初学者：/

【参考方案1】：

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

【讨论】：

是的，我想它会起作用，但是如果我有一个链接我所有库的 app.js，那么就不必在我所有的 .vue 文件中导入它们，在我的所有页面中。如果我这样做，我的 js 文件会很大，浏览器缓存将无法正常工作：/.当我直接在我的 .html.twig 文件中使用 VueJs 时我会做什么？我不能：/

如果配置正确，webpack 可以将供应商库拆分为公共块，这意味着您的大小不会失控。不确定您在浏览器缓存中暗示的问题会在哪里发挥作用。您将如何在 .html/.twig 文件中直接使用 VueJs？ Vue 是一个框架，而不是一种语言。在组件中导入库是你必须要做的。