为什么导入 Vue.js 源有效，但模块无效？

Question

以下HTML代码

<!DOCTYPE html>
<html lang="en">
    <body>
        Greeting below: 
        <div id="time">
            {{greetings}}
        </div>
        <script src='bundle.js'></script>
    </body>
</html>

连同 entry.js 文件

// either the import or the require work
Vue = require('./vue.js')
//import Vue from './vue.js'
new Vue({
    el: "#time",
    data: {
        greetings: "hello world"
    }
})

和webpack.config.js

module.exports = {
    entry: './entry.js',
    output: {
        filename: 'bundle.js'
    }
}

工作正常（vue.js 是从站点或 CDN 本地下载的）。

然后我尝试通过将 entry.js 更改为

来使用通过 npm install vue --save-dev 安装的 vue 模块

import Vue from 'vue'
new Vue({
    el: "#time",
    data: {
        greetings: "hello world"
    }
})

此版本不再有效：整个 <div> 未呈现（仅显示 Greeting below）。

需要做什么才能让Vue.js可以和webpack一起使用？

Vue 文档多次提到 webpack，但只是在组件或生产构建的上下文中。

Answer 1

您可以导入 vue 的编译 (dist) 版本。

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

Answer 2

要诊断问题，最好查找任何错误，无论是来自命令行上的构建工具还是浏览器中的开发工具。如果你打开 devtools 控制台，你会看到来自 Vue 的以下警告：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

Vue 有两个不同的构建，Runtime + Compiler vs. Runtime-only。如果您在 DOM 中有模板，则需要编译它们才能使用它们。默认情况下，Vue 只包含运行时，因为它更轻量，而且通常模板已经在构建时预编译为 JavaScript。

要同时包含您需要导入的编译器 vue/dist/vue.esm:

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

这与来自 CDN 的版本相同，只是它使用 ES 模块，webpack 将处理这些模块，您应该更喜欢它而不是 vue/dist/vue.js，这正是来自 CDN 的版本。

或者你可以使用 webpacks resolve.alias 来定义别名，所以当你导入 vue 时，它将导入 vue/dist/vue.esm。

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js'
    }
}

为了能够使用仅运行时构建，您可以使用 Single File Components with a .vue file. For that you will have to configure vue-loader，它将在构建时预编译模板。

为什么导入 Vue.js 源有效，但模块无效？

Why importing the Vue.js source works, but not the module?

javascript

webpack

vue.js

webpack-2