Question

我是Vue的新手，这是我第一次手动配置webpack。我以前使用webpack的经历总是将它抽象在另一个框架之后，即webpack作为create-react-app的一部分。问题是我的新配置不起作用。作为旁注，这是雨果网站的一部分。

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

以前的配置：

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

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形式：

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

为简洁起见，我遗漏了方法和数据部分。一切都很好。 Vue应用程序在两个页面上呈现并运行良好。

我尝试做的是使用webpack捆绑JS。这是为了减少生产文件和cache-bust的数量。以前的设置将导致大约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的主要优势之一是它应该如何容易地进行增量迁移，而不是整个架构的大修。

我很感激这个问题的任何提示。谢谢。

Answer 1

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

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

vue init webpack <project-name>

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

webpack + Vue：Vue app无法渲染

2 个答案: