Vue.js 声明式渲染在 webpacking 后不起作用答案

【问题标题】：Vue.js Declarative rendering not working after webpackingVue.js 声明式渲染在 webpacking 后不起作用
【发布时间】：2018-11-29 03:24:51
【问题描述】：

下面是我的 index.html 文件

<!doctype html>
<html><head>
  <body>
    <h1>ES</h1>
    <div id="app">
        {{ message }}
      </div> 
      <script src="dist/main.js" type="text/javascript"></script></head>  
  </body>
</html>

我正在尝试使用基本的 vue.js 声明式渲染。我的零配置 webpack 的 index.js 输入如下

import Vue from 'vue';

var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })

message 的值没有显示在页面中。这与我的 webpack 配置有关吗？我需要使用 Babel 转译器来让它工作吗？

【问题讨论】：

您的<head> 和<body> 标签嵌套不正确。

标签： npm webpack vue.js

【解决方案1】：

请参阅文档中的Explanation of Different Builds。

这些捆绑器 (pkg.module) 的默认文件仅是运行时 ES 模块构建 (vue.runtime.esm.js)。

Vue 仅使用运行时构建不包括 HTML 模板编译器，您需要在您的情况下使用它。（仅运行时构建的大小要小 30%）

如文档所述，要导入 Vue 的完整版本，您可以使用

import Vue from 'vue/dist/vue.esm.js';

顺便说一句，我强烈建议你使用 vue-cli 而不是自己配置 Vue 项目。

【讨论】：