Question

我通过如下修改Webpack将Vue.js版本更改为运行时版本：

  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.runtime.js'
      // 'vue$': 'vue/dist/vue.esm.js'
    }
  },

注释掉的版本是我以前使用的版本，我的应用程序正常运行。这是我的Vue.js代码（以前有效）：

import Forgot from "./components/Forgot.vue";
import Vue from "vue";

new Vue({
    el: "#app",
    components: {
        Forgot
    },
    data: {
        email: ""
    }
});

在Vue.js的运行时版本下，出现以下错误：

Uncaught TypeError: n(...).default is not a constructor

和Chrome DevTools将错误隔离到以下行：

new Vue({

为什么我的代码在Vue的运行时版本下不起作用？

Answer 1

如果您查看官方文档（https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds），则会发现有关不同内部版本的说明。因此，您尝试在ES环境中使用UMD构建（应该在浏览器中运行-而不是由Webpack转换）。您应该尝试使用vue.runtime.esm.js。顺便说一句，如果您没有为vue$配置别名，它将自动选择正确的别名-vue.runtime.esm.js

使用Vue的运行时版本时，为什么我的Vue.js应用程序无法运行？

1 个答案: