使用的WebPack与VUE，但要求似乎不工作

我用的WebPack捆绑JS，样品：使用的WebPack与VUE，但要求似乎不工作

var Vue = require('vue') 

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

    methods: { 

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

使用的WebPack生成一个包，并将其包含在HTML中，遇到错误：

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

任何想法在这里失踪？谢谢，

来源

2017-03-10 AngeloC

是否使用单个文件组件？ –

只是试图把VUE放入webpack而不是将其包含在html中， – AngeloC

回答了你的问题 –

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，只是不容易找到

来源

2017-03-11 05:13:51 AngeloC

的感谢！将'resolve'添加到我的webpack配置中解决了我的问题！ – Renesansz

看看下面的代码。您不会创建新变量，这就是您无法使用的原因：var app = ...。只需致电新Vue。

此外，与进口ES6 import Vue from 'vue'

import Vue from 'vue' 

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

    methods: { 

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

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

来源

2017-03-10 14:54:50

使用新的Vue，得到了同样的错误，找到的样本通常使用import而不是require，可能这就是原因？ – AngeloC

几分钟前我编辑了答案，因为我忘记了'import'。正在等待编辑。此外，替换需要与ES6导入导入Vue从'vue' –

将其更改为'导入..'，我有一个新的错误：test3b.js：636 [Vue警告]：您使用的只是运行时版本Vue模板编译器不可用的地方。可以将模板预编译为渲染函数，也可以使用编译器包含的构建。（发现于） – AngeloC

您可以检出vue-hackernews-2.0项目，该项目提供的WebPack VUE的样本实现，在他们app.js，你会发现以下几点：

import Vue from 'vue'

您必须已经具有package.jsonvue依赖，因为它是here并且已经通过以下方式安装：npm install

来源

2017-03-10 14:55:09 Saurabh

我们可以使用Vue = require（'vue'）吗？ – AngeloC

@AngeloC理想情况下，我没有看到它不应该工作的任何原因，'import'语法是否有效？ – Saurabh

包有VUE的依赖： “依赖”：{ “V型验证”： “^ 2.0.0 beta.25”， “VUE”： “^ 2.2.2” } – AngeloC

使用的WebPack与VUE，但要求似乎不工作

回答

相关问题