将 webpack 与 vue 一起使用，但 require 似乎不起作用

Question

我使用webpack打包js，示例：

var Vue = require('vue')

var app = new Vue({
    el: '#app',
    data: {
        info: { email: '' },
        email: ''
    },

    methods: {

        onSignin: function (e) { },
    }
})

使用 Webpack 生成一个 bundle 并包含在 html 中，出现错误：

test3b.js:7019 Uncaught TypeError: Vue is not a constructor(…)

知道这里缺少什么吗？谢谢，

Answer 1

var Vue = require('vue')

是正确的，但它默认拉入运行时版本：

vue/dist/vue.runtime.common.js

这将触发错误并标记为警告， 需要告诉 webpack 拉入另一个版本，

vue/dist/vue.min.js

为此，在 webpack.config.js 中添加以下内容：

resolve: {
    alias: {
      vue: 'vue/dist/vue.min.js'
    }
}

这是documented here，但不容易找到

Answer 2

您可以查看vue-hackernews-2.0 项目，该项目提供了使用 webpack 实现 vue 的示例，在他们的 app.js 中，您会发现以下内容：

import Vue from 'vue'

您必须已经在 package.json 中拥有 vue 依赖项，因为它是 here 并且您已通过以下方式安装它：npm install

Answer 3

看看下面的代码。您没有创建新变量，这就是您不能使用的原因：var app = ...。只需调用新的 Vue。

另外，将 require 替换为 ES6 导入 import Vue from 'vue'

import Vue from 'vue'

new Vue({
    el: '#app',
    data: {
        info: { email: '' },
        email: ''
    },

    methods: {

        onSignin: function (e) { },
    }
})

类似于官方的 VueJS Webpack 模板。 https://github.com/vuejs-templates/webpack/blob/master/template/src/main.js