Webpack 网页包+；Vue:Vue应用程序未渲染_Webpack_Vue.js_Hugo

Webpack 网页包+；Vue:Vue应用程序未渲染

webpack vue.js

Webpack 网页包+；Vue:Vue应用程序未渲染,webpack,vue.js,hugo,Webpack,Vue.js,Hugo,我是Vue新手，这是我第一次手动配置webpack。我以前使用webpack的经验总是将它抽象到另一个框架之后，即webpack作为CreateReact应用程序的一部分。问题是我的新配置不起作用。作为旁注，这都是雨果网站的一部分我以前的配置，但我的新配置没有以前的配置：共有2个页面，其中包含2个单独的Vue应用程序通过CDN加载的Vue 注: 雨果被使用了（可能很快就会离开）作为hugo结构的一部分，源JS文件位于static/JS目录中，服务文件位于public/JS li

我是Vue新手，这是我第一次手动配置webpack。我以前使用webpack的经验总是将它抽象到另一个框架之后，即webpack作为CreateReact应用程序的一部分。问题是我的新配置不起作用。作为旁注，这都是雨果网站的一部分

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

以前的配置：

共有2个页面，其中包含2个单独的Vue应用程序
通过CDN加载的Vue

注:

雨果被使用了（可能很快就会离开）
作为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>

form.html：

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

<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>

为了简洁起见，我省略了方法和数据部分。一切都很顺利。Vue应用程序在两个页面上都呈现，功能良好

我想做的是使用webpack捆绑JS。这是为了减少生产文件的数量并缓存bust。以前的设置将产生大约10个单独的JS文件

当前设置尚未完全正常工作：

list.html/form.html：

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

<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>

webpack.config.js：

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

问题在于，在呈现的HTML中，Vue应用程序应该生成的位置，即

div#Vue列表

，是其他内容，如下所示：

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

我想保持目前的每页一个应用的结构，而不是把它全部变成一个单页应用。Vue的一个主要魅力在于它应该如何轻松地进行增量迁移，而不是对整个体系结构进行彻底检修

如果您能就这个问题提供任何提示，我将不胜感激。谢谢。

错误在于您在html中声明了

…

标记。创建Vue实例时必须声明模板

解决方案
改变

到

newvue({
el:“#vue表单”，
模板：`内容在这里`
})

我不确定您是否仍然被这个问题困扰

我建议您使用vue cli和网页包模板创建新的vue应用程序，然后逐个添加视图。在这种情况下，不需要编辑webpack.config.js

vue init webpack <project-name>

vue初始化网页包

请有人解释一下为什么这个问题被否决了？我尽可能地具体和恭敬。不提供解释就否决投票是不负责任的行为。问题是你的

.html

文件是如何生成的？@Harry它只是静态的。不是由任何东西生成的。那么

是如何生成的？“不是由任何东西生成”意味着我没有使用像Webpack或Gulp这样的捆绑包。它显示了这一点，因为我已经通过脚本标记包含了VueJS。

<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>`
})

vue init webpack <project-name>