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

Question

The following HTML code以下 HTML 代码

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

together with the entry.js file连同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"
    }
})

and the webpack.config.js和webpack.config.js

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

works fine ( vue.js is locally downloaded from the site or a CDN).工作正常（ vue.js是从站点或 CDN 本地下载的）。

I then tried to use the vue module installed via npm install vue --save-dev by changing entry.js to然后我尝试通过将entry.js更改为来使用通过npm install vue --save-dev的vue模块

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

This version does not work anymore: the whole <div> is not rendered (only Greeting below is displayed).这个版本不再工作了：整个<div>没有被渲染（只显示Greeting below ）。

What should be done so that Vue.js can be used with webpack?应该怎么做才能使 Vue.js 可以与 webpack 一起使用？

The Vue documentation mentions webpack a few times, but only in the context of components or production builds. Vue 文档多次提到 webpack，但仅在组件或生产构建的上下文中。

Answer 1

您可以导入 vue 的已编译（dist）版本。

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

Answer 2

To diagnose the problem it's a good idea to look for any errors, whether it's from the build tool on the command line or in the devtools in the browser.要诊断问题，最好查找任何错误，无论是来自命令行上的构建工具还是浏览器中的 devtools。 If you open the devtools console you'll see the following warning from Vue:如果您打开 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 has a two different builds, Runtime + Compiler vs. Runtime-only . Vue 有两个不同的构建， Runtime + Compiler vs. Runtime-only 。 If you have templates in the DOM, they need to be compiled in order to use them.如果您在 DOM 中有模板，则需要对其进行编译才能使用它们。 By default Vue contains only the runtime, because its more light-weight and usually the templates are already pre-compiled to JavaScript at build time.默认情况下，Vue 只包含运行时，因为它更轻量级，而且模板通常在构建时已经预编译为 JavaScript。

To also include the compiler you need to import vue/dist/vue.esm :要包含编译器，您需要导入vue/dist/vue.esm ：

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

This is the same version as the one from the CDN, except that it uses ES modules, which webpack will handle and you should prefer it over vue/dist/vue.js , which is exactly the one from the CDN.这与 CDN 中的版本相同，除了它使用 ES 模块，webpack 将处理该模块，您应该更喜欢它而不是vue/dist/vue.js ，这正是 CDN 中的版本。

Alternatively you can use webpacks resolve.alias to define an alias, so when you import vue it will import vue/dist/vue.esm instead.或者，您可以使用 webpacks resolve.alias来定义别名，因此当您导入vue时，它将改为导入vue/dist/vue.esm 。

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

To be able to use the runtime-only build, you can use Single File Components with a .vue file.为了能够使用仅运行时构建，您可以将单文件组件与.vue文件一起使用。 For that you will have to configure vue-loader , which will pre-compile the templates at build time.为此，您必须配置vue-loader ，它将在构建时预编译模板。

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

问题描述

2 个解决方案

解决方案1
4 2017-07-23 20:55:31

解决方案2
1 已采纳 2017-07-23 22:25:38

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

问题描述

2 个解决方案

解决方案1 4 2017-07-23 20:55:31

解决方案2 1 已采纳 2017-07-23 22:25:38

解决方案1
4 2017-07-23 20:55:31

解决方案2
1 已采纳 2017-07-23 22:25:38