【问题标题】:Vuejs component is not loaded by using webpack使用 webpack 未加载 Vuejs 组件
【发布时间】:2018-09-16 17:18:26
【问题描述】:
import Vue from 'vue'
import ProductEdit from './ProductEdit.vue'
import App from 'components/App.vue'

new Vue({
  el: '#page',
  components: {
    'app': App
  },
  render: h => h(ProductEdit)
})

为什么ProductEdit 被渲染,而App 却没有? 这是我的 html 文件:

{% load render_bundle from webpack_loader %}

<div id="page">
    <h1>TEST</h1>
    <app>

    </app>
</div>

{% render_bundle page %}

此外,“TEST”标头也不会呈现。我该如何调试呢?控制台没有显示任何错误。

编辑: 我也试过不使用渲染功能,但没有帮助。

【问题讨论】:

    标签: javascript vue.js webpack


    【解决方案1】:

    render function 替换了指定 el 的模板内容(即本例中的 #page 元素)。如果您更喜欢使用 in-DOM 模板(似乎是这种情况),则必须删除渲染功能:

    new Vue({
      el: '#page',
      // render: /* ... */    // DELETE
    })
    

    我假设您希望 App 包含 ProductEdit。为此,请在App 中注册ProductEdit 组件:

    // App.vue
    export default {
      components: {
         ProductEdit,
      },
    })
    

    ...并在App的模板中添加元素:

    <!-- App.vue -->
    <template>
      <div>
        <product-edit />
      </div>
    <template>
    

    demo

    【讨论】:

    • 你是对的,但这不是问题所在。我也用我们的渲染功能试过了,没有用。
    • “没用”是什么意思?您看到的错误/行为是什么?
    • 错误是一样的,没有渲染。我在我的案例中发布了带有解决方案的答案。
    • 嗯。不确定 Webpack 是如何导致原始问题的,但我很高兴你让它正常工作。 :)
    【解决方案2】:

    好的,我修好了。问题是我在webpack.config.js 中重新定义了resolve 属性,它覆盖了通过vue cli 生成的默认解析:

    ...
    
      resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
        },
        extensions: ['*', '.js', '.vue', '.json']
      },
    ...
    
      resolve: {
        alias: {
          'components': path.resolve(__dirname, 'src/components'),
        },
      },
    

    所以我把它合并成:

      resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          'components': path.resolve(__dirname, 'src/components'),
        },
        extensions: ['*', '.js', '.vue', '.json']
      },
    

    【讨论】:

      猜你喜欢
      • 2018-09-13
      • 2017-02-14
      • 2018-12-21
      • 2019-05-09
      • 1970-01-01
      • 2021-12-29
      • 2018-02-11
      • 2017-12-24
      • 2017-07-31
      相关资源
      最近更新 更多