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

Question

这是我的代码code example

我正在尝试学习 webpack 4 并正在设置一个测试项目。

传统上，我在 Asp.net 网站中构建了 vuejs 应用程序。所以我一直知道入口html点，可以把元素放在页面上。

从所有博客 post 我看到的 vue 似乎就是他们设置应用程序所做的一切。

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 warn]: Cannot find element: #app.如果我添加

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

代码运行没问题。由于我使用的是 vue-router，我认为我实际上不需要 App.vue 文件，但我仍然需要某个地方来挂载 vue 对象。

看看我的 github link，正确的方法是什么？

Answer 1

这是一个 chicken-and-egg 问题。您试图将根组件添加到 #app div，但 #app div 存在于 App 组件中。当您调用 new Vue 时，#app div 不存在，因为 App 组件尚未安装！

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

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

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

document.body.appendChild(root.$el)

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

How to properly inject app element in webpack? - Receiving [Vue warn]: Cannot find element: #app

vue.js

ts-loader

webpack-4