如何将 Vue 添加到现有的 Webpack 项目答案

【问题标题】：How to add Vue to existing Webpack project如何将 Vue 添加到现有的 Webpack 项目
【发布时间】：2018-11-28 07:30:45
【问题描述】：

我有一个 Webpack 项目，我想在其中使用 Vue。我在我的 JavaScript 文件中导入 Vue，如下所示：

import "../../node_modules/vue/dist/vue.min.js";

我可以在我的包中看到vue.min.js，但是当我尝试在我的 HTML 文件或 JavaScript 文件中实例化 Vue 时：

var app = new Vue({
  el: ‘#app’,
  data: {
    message: ‘Hello Vue!’
  }
})

我在控制台中收到此错误：

Uncaught ReferenceError: Vue is not defined
    at eval (ins.js?be14:2)
    at Object../src/scripts/ins.js (app.js:485)
    at __webpack_require__ (app.js:79)
    at eval (index.js?48f5:1)
    at Module../src/scripts/index.js (app.js:474)
    at __webpack_require__ (app.js:79)
    at Object.0 (app.js:530)
    at __webpack_require__ (app.js:79)
    at checkDeferredModules (app.js:46)
    at app.js:152

我尝试通过 CDN 在我的 HTML 中直接添加 vue.min.js，一切正常。加载时是否存在一些排序问题？我该如何解决这个问题？

【问题讨论】：

标签： javascript vue.js webpack vuejs2

【解决方案1】：

你应该像这样将 Vue 导入到一个变量中：

import Vue from 'vue'; // or import Vue from '../../node_modules/vue/dist/vue.min.js';

它应该适用于您的示例：

import Vue from 'vue';

var app = new Vue({
  el: ‘#app’,
  data: {
    message: ‘Hello Vue!’
  }
})

【讨论】：

@user3348410 没问题 ;)