Vuejs组件不是用webpack加载的
Vuejs组件不是用webpack加载的
提问于 2018-09-17 01: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“标头也不会呈现。我如何调试它呢？控制台不会显示任何错误。
编辑:我也尝试过不使用render函数，但它没有帮助。
回答 2
Stack Overflow用户
发布于 2018-09-17 12:36:31
render function替换指定el (即本例中的#page元素)的模板内容。如果您更喜欢使用DOM中的模板(看起来就是这种情况)，则必须删除render函数：
new Vue({
el: '#page',
// render: /* ... */ // DELETE
})我假设您希望App包含ProductEdit。为此，请在App中注册ProductEdit组件
// App.vue
export default {
components: {
ProductEdit,
},
})...and在App的模板中添加元素：
<!-- App.vue -->
<template>
<div>
<product-edit />
</div>
<template>Stack Overflow用户
发布于 2018-09-17 23:36:38
好吧，我把它修好了。问题是我在webpack.config.js中重新定义了resolve属性，它覆盖了通过vue线索生成的默认解析：
...
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']
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52356585
复制相关文章
相似问题