使用 Browserify 和 CommonJS 表达 Vue 依赖项答案

【问题标题】：Expressing Vue dependencies w/Browserify & CommonJS使用 Browserify 和 CommonJS 表达 Vue 依赖项
【发布时间】：2019-01-10 19:39:46
【问题描述】：

我正在尝试使用 Vue，并希望使用我通常使用 budo(browserify + watchify) 的设置开发一个节点应用程序。 ./index.html:

    <div id="app">
      {{ message }}
    </div>
<!-- ===================== JavaScript Files Below This Line =============== -->
    <script src="index.js"></script>

和 ./src/js/main.js

const Vue = require('vue');

const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });

  module.exports = app;

使用 ./index.js

// js includes
require('./src/js/main');

我看不到页面上的消息。我在控制台中看到 index.js，其中注入了 main.js。当我将 Vue CDN 与 index.html 中的 vue 代码一起使用时，它可以正常工作。我希望有人可以阐明在捆绑 w/browserify 时如何使用 CommonJS 模块将 vue 代码导入他们的应用程序。在此先感谢...

【问题讨论】：

标签： vue.js browserify commonjs budo

【解决方案1】：

如Vue.js not rendering 此处所述，您需要将其添加到您的 package.json 文件：

 "browser": {
    "vue": "vue/dist/vue.common.js"
  }

【讨论】：