Question

下面是我的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!'
    }
  })

该消息的值未显示在页面中。这与我的webpack配置有关。我需要使用Babel Transpiler才能使它正常工作吗？

Answer 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项目。

Webpack打包后Vue.js声明式渲染不起作用

1 个答案: