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

Question

這是我的代碼示例

我正在嘗試學習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

這是一個雞與蛋的問題。 您正在嘗試將根組件的數量分配到#app div中，但是#app div存在於App組件中。 在您調用new Vue ，由於尚未安裝App組件，因此#app div不存在！

大多數Vue應用程序在index.html文件中都有一個空的<div id="app"></div> ，以便在頁面加載后，根Vue組件可以掛載到某個地方。

如果您不想這樣做，可以改為手動安裝：

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

document.body.appendChild(root.$el)