Question

这是我的代码code example

我正在尝试学习webpack 4，并正在建立一个测试项目。

传统上，我是在Asp.net网站内部构建了vuejs应用。因此，我总是知道条目html的指向，并且可以将元素放在页面上。

在我看到的所有博客文章中，这似乎都是他们设置应用程序所要做的。

App.Vue

<template>
    <div id='app'>
        <router-view></router-view>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class App extends Vue {

}
</script>

index.ts

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  render: (h) => h(App),
  router
}).$mount('#app');

运行此命令时，出现[Vue警告]：找不到元素：#app。如果我添加

 document.write('<div id="app"><router-view></router-view></div>');

代码运行正常。由于我使用的是vue-router，因此我实际上并不需要App.vue文件，但我仍然需要某个位置来挂载vue对象。

那么看看我的github链接，什么是使它正常工作的正确方法？

Answer 1

这是一个chicken-and-egg问题。您正在尝试将根组件的数量计为#app div，但是#app div存在于App组件中。在您调用new Vue时，#app div不存在，因为App组件尚未挂载！

大多数Vue应用在<div id="app"></div>文件中有一个空白的index.html，以便在页面加载时根Vue组件可以挂载到某个地方。

如果您不想这样做，则可以手动安装它：

const root = new Vue({
  render: (h) => h(App),
  router
}).$mount()

document.body.appendChild(root.$el)

如何在webpack中正确注入应用程序元素？ -接收[Vue警告]：找不到元素：#app

1 个答案: