webpack + Vue：Vue 应用程序未呈现答案

【问题标题】：webpack + Vue: Vue app not renderingwebpack + Vue：Vue 应用程序未呈现
【发布时间】：2018-10-02 11:19:00
【问题描述】：

我是 Vue 新手，这是我第一次手动配置 webpack。我以前使用 webpack 的经验总是把它抽象到另一个框架后面，即 webpack 作为 create-react-app 的一部分。问题是我的新配置不起作用。作为旁注，这都是 Hugo 网站的一部分。

我以前的配置，但我的新配置没有。

之前的配置：

有 2 个页面和 2 个独立的 Vue 应用程序
通过 CDN 加载的 Vue

注意事项：

使用了 Hugo（可能很快就会离开）
作为hugo结构的一部分，源JS文件在static/js目录下，服务文件在public/js目录下

list.html:

<head>
    <script src="vue_cdn_here"></script>
</head>
<body>
    <div id="vue-list>
        <template>
           ....
        </template>
    <div>
    <script src="vue-list.js"></script>
</body>

vue-list.js：

new Vue({
    el: '#vue-list',
    ...
})

form.html:

<head>
    <script src="vue_cdn_here"></script>
</head>
<div id="vue-form>
    <template>
        ...
    </template>
<div>
<script src="vue-form.js"></script>

vue-form:

new Vue({
    el: '#vue-form',
    ...
})

为简洁起见，我省略了方法和数据部分。一切正常。 Vue 应用在两个页面上都呈现并且运行良好。

我要做的是使用 webpack 捆绑 JS。这是为了减少生产文件的数量和缓存破坏。以前的设置会产生大约 10 个单独的 JS 文件。

当前的设置还不能很好地工作：

list.html/form.html:

<head>
    // no scripts in head anymore
</head>
<body>
    <div id="respective_id_here">
        <template>
            // view code here
        </template>
    </div>
    <script src="bundle.js"></script>
</body>

_index.js:

...
import './vue-list';
import './vue-form';
...

webpack.config.js：

module.exports = {
    entry: './static/js/_index.js',
    output: {
        path: __dirname,
        filename: './static/js/bundle.js'
    }
};

问题在于，在呈现的 HTML 中，在应该生成 Vue 应用程序的位置，即div#vue-list，是别的东西，就像这样：

<head>
</head>
<body>
<!--function(e,n,r,i){return sn(t,e,n,r,i,!0)}-->
</body>

我想保留我们目前拥有的每页一个应用程序的结构，而不是将其全部变成一个单页应用程序。 Vue 的主要魅力之一是它应该很容易进行增量迁移，而不是整个架构大修。

我将不胜感激有关此问题的任何提示。谢谢。

【问题讨论】：

有人请解释为什么这个问题被否决了？我尽可能具体和尊重。在不提供解释的情况下投反对票是不负责任的举动。
问题是您的.html 文件是如何生成的？
@Harry 这只是静态的。不是由任何东西产生的。
那是怎么生成的？
'不是由任何东西生成'意味着我还没有使用像 Webpack 或 Gulp 这样的打包工具。它显示了这一点，因为我已经通过脚本标签包含了 VueJS。

标签： webpack vue.js hugo

【解决方案1】：

我不确定您是否仍然遇到此问题。

我建议你使用 vue-cli 和 webpack 模板创建新的 vue 应用，然后一个一个添加视图。在这种情况下，无需编辑 webpack.config.js。

vue init webpack <project-name>

【讨论】：

【解决方案2】：

错误是您在 html 中声明了<template> ... 标签。创建Vue实例时必须声明模板https://vuejs.org/v2/api/#template

解决方案
改变

<div id="vue-form>
    <template>
        ...
    </template>
<div>

到

<div id="vue-form/>

然后改变

new Vue({
  el: '#vue-form',
  ...
})

到

new Vue({
  el: '#vue-form',
  template: `<div> content goes here... </div>`
})

【讨论】：