如何将'vue.js'添加到webpack的bundle.js中

Question

i'm trying to add 'vue' in my 'webpack' bundle.js but i doesn't work... 我正在尝试在我的'webpack'bundle.js中添加'vue'，但我不能正常工作......

webpack.config.js webpack.config.js

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

entry.js entry.js

var Vue = require('vue');

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'Hello, Vue!'
    }
});

index.html 的index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue Study</title>
    </head>
    <body>
        <div id="app">
            {{ msg }}
        </div>
        <script src="bundle.js"></script>
    </body>
</html>

index.html on chrome & dev-console chrome＆dev-console上的index.html

Answer 1

Vue 2.2 now per default uses ES6 modules, but despite it was pointed in the other answer as wrong, you can still use CommonJS if you want, so is not wrong do require('vue') , however, is recommended to switch to the new syntax. Vue 2.2现在默认使用ES6模块，但是尽管在另一个答案中指出它是错误的，你仍然可以使用CommonJS，所以没有错，do require('vue') ，但是，建议切换到新语法。

You can do: 你可以做：

var Vue = require('vue').default;

or 要么

import Vue from 'vue';

The last works without the default property, because the new ES6 syntax does this automatically for you. 最后一个没有default属性，因为新的ES6语法会自动为您执行此操作。

Answer 2

You should replace 你应该更换

var Vue = require('vue')

by 通过

import Vue from 'vue'

如何将'vue.js'添加到webpack的bundle.js中

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-03-26 18:36:35

解决方案2
-1 2017-03-26 17:55:37

如何将&#39;vue.js&#39;添加到webpack的bundle.js中

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-03-26 18:36:35

解决方案2 -1 2017-03-26 17:55:37

如何将'vue.js'添加到webpack的bundle.js中

解决方案1
1 已采纳 2017-03-26 18:36:35

解决方案2
-1 2017-03-26 17:55:37