javascript - 我怎样才能将 'vue.js'添加到webpack的bundle.js中

标签 javascript webpack vue.js

我正在尝试在我的“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

最佳答案

Vue 2.2 现在默认使用 ES6 模块,但尽管在其他答案中指出它是错误的,但如果你愿意,你仍然可以使用 CommonJS,所以 require('vue') 并没有错 但是,建议切换到新语法。

你可以这样做:

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

从 'vue' 导入 Vue;

最后一个无需 default 属性即可工作,因为新的 ES6 语法会自动为您执行此操作。

关于javascript - 我怎样才能将 'vue.js'添加到webpack的bundle.js中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43030001/

相关文章:

laravel - Vuejs Axios POST 请求从 Laravel 后端获取 HTTP422 错误

javascript - jquery输入类型图片点击事件

javascript - 将 'Alt' 按键添加到现有按键功能

javascript - 手动强制 ko.observable 以在页面加载时通知订阅

javascript - 将功能链的结果传递给函数

javascript - 使用 vuejs 对表行进行动态倒计时

javascript - 如何在 Vue 中加载 YAML 文件?

javascript - Typescript 和 webpack

javascript - babel (nextjs/webpack) 无法编译类

javascript - 如何组合两个组件 Vue.js