如何在 webpack 中正确注入 app 元素? - 接收 [Vue 警告]:找不到元素:#app
Posted
技术标签:
【中文标题】如何在 webpack 中正确注入 app 元素? - 接收 [Vue 警告]:找不到元素:#app【英文标题】:How to properly inject app element in webpack? - Receiving [Vue warn]: Cannot find element: #app 【发布时间】:2019-05-16 11:28:37 【问题描述】:这是我的代码code example
我正在尝试学习 webpack 4 并正在建立一个测试项目。
传统上,我在 Asp.net 网站中构建了 vuejs 应用程序。所以我总是知道入口html点,可以把元素放到页面上。
从我看到的所有关于 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 警告]:找不到元素:#app。如果我添加
document.write('<div id="app"><router-view></router-view></div>');
代码运行良好。由于我使用的是 vue-router,我认为我实际上并不需要 App.vue 文件,但我仍然需要某个地方来挂载 vue 对象。
那么看看我的 github 链接,让这个工作的正确方法是什么?
【问题讨论】:
【参考方案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)
【讨论】:
谢谢。我就是这么想的。我发现了如何修改 html-webpack-plugin 生成的 index.html。 github.com/jantimon/html-webpack-plugin 如果有人感兴趣,这里有更新的代码。 code以上是关于如何在 webpack 中正确注入 app 元素? - 接收 [Vue 警告]:找不到元素:#app的主要内容,如果未能解决你的问题,请参考以下文章
请问如何禁用 webpack 将 eslint 错误注入我的网页
在 grails-app 之外的 Grails 类中注入日志对象
HTML Webpack 插件未创建正确的 index.html 文件