Question

我正在尝试在'webpack'bundle.js中添加'vue' 但我不工作......

webpack.config.js

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

entry.js

var Vue = require('vue');

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

的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

Answer 1

Vue 2.2现在默认使用ES6模块，但是尽管在另一个答案中指出它是错误的，你仍然可以使用CommonJS，所以没有错误，require('vue')但是，建议切换新的语法。

你可以这样做：

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

或

import Vue from 'vue';

最后一个没有default属性，因为新的ES6语法会自动为您执行此操作。

Answer 2

你应该替换

var Vue = require('vue')

通过

import Vue from 'vue'

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

2 个答案: