没有使用template属性，为什么打包vue.runtime.js会失败？

Question

根据官网上的表格

一开始我引用的是vue/dist/vue.js

一切正常！！

随后引用vue.runtime.js文件，打包是成功的，没有报错

然而页面却是空白，并且报错

说我的模板编译器不可用，可我压根没用到template属性，下面是我的index.js源码

// import Vue from 'vue/dist/vue';    //正常
import Vue from 'vue/dist/vue.runtime';    //报错

new Vue({
    el: '#app',
    data: {
        msg: 'hello world'
    }
})

我没有使用template属性，也没有.vue文件，为什么需要独立构建呢？谢谢~

顺便放上webpack配置，简单滴很~

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    context: __dirname + '/src',
    entry: {
        index: './js/index.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: __dirname + '/dist'
    },
    module: {
        rules: [{　　　　　　
            test: /\.html$/,
            use: 'html-withimg-loader'
        }]
    },
    resolve: {
        extensions: ['*', '.js', '.vue']
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './html/index.html',
            filename: './index.html',
            chunks: ['index']
        })
    ]
};

html文件更简单，直接截图吧~~

Answer 1

使用render函数。runtine.js是没有compiler模版的能力的。

Answer 2

new Vue({
    el: '#app',
    data: {
        msg: 'hello world'
    }
})

这段代码就是用的 vue complier 进行了模板解析。两种方法：

1. 使用 render 函数，但是写法太复杂，针对 html template 转换麻烦，除非是简单的 html 标签，或引用其他组件；
2. webpack 打包的时候，指定 vue 文件

resolve: {
    extensions: ...
    alias: {
        vue: 'vue/dist/vue.js'     // by default, it is vue.runtime.js
    }
}

使用的时候，直接 import vue from 'vue';