为什么导入Vue.js源是有效的,但不是模块?

时间:2017-07-23 20:47:30

标签: javascript webpack vue.js webpack-2

以下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本地下载。

然后,我尝试通过将vue更改为

,通过npm install vue --save-dev安装entry.js模块
import Vue from 'vue'
new Vue({
    el: "#time",
    data: {
        greetings: "hello world"
    }
})

此版本不再有效:整个<div>未呈现(仅显示Greeting below)。

应该怎么做才能让Vue.js与webpack一起使用?

Vue文档提到了几次webpack,但仅在组件或生产版本的上下文中提到。

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

要诊断问题,最好查找任何错误,无论是来自命令行上的构建工具还是浏览器中的devtools。如果您打开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中的那个。

或者,您可以使用网络包[{3}}来定义别名,因此当您导入vue时,它会导入vue/dist/vue.esm

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

为了能够使用仅运行时版本,您可以将resolve.alias.vue文件一起使用。为此,您必须配置Single File Components,它将在构建时预编译模板。