Vue 构建项目报错相关问题

问题：Vue项目中使用了Runtime-only模式构建后打开页面报错

背景：

用户将直接按照官网的实现方式创建了Vue框架下SpreadJS：https://www.grapecity.com.cn/blogs/spreadjs-support-vue

但是当启动项目后，发现控制台会出现如下报错：

解答：

根据报错信息我们可以知道，用户构建Vue项目时，使用的是Runtime-only模式来进行构建的。这是出现该报错的根本原因。

Vue.js 的构建版本划分主要包括两种：Runtime-only 模式和 Runtime + Compiler 模式。二者间的主要区别在于是否包含 Vue 的模板编译器。

Runtime-only (仅运行时): 这种模式下，Vue 会预先将模板编译为 JavaScript 在浏览器运行。所以你无法使用 template 选项，因为所有的模板已经预编译为 render 函数。由于去掉了编译器，这种构建版本要比包含编译器的版本体积小大约 30%，更快，更高效。

Runtime + Compiler (运行时+编译器): 这个版本含有完整的编译器和运行时环境。这意味着你可以在客户端编译 Vue 模板。这种在客户端进行模板编译的情况通常发生在使用字符串，x-template，或者 inline-template 作为模板的时候。

一般来说，如果你在开发过程中，所有的 Vue 组件的模板都是事先写好的，且不需要动态编译，则可以考虑使用 Runtime-only 构建版本，从而提高应用的性能。相反，如果你需要在客户端对模板进行动态编译，你则需要使用 Runtime + Compiler 构建版本。

在项目实际搭建过程中，如果使用 vue-cli 创建的项目，默认是使用的Runtime-only模式，就是说vue项目创建成功后，我们写的.vue文件，内的模板是不能编译的，我们需要额外配置webpack，来使其支持 template 模板编译。

回到报错本身，SpreadJS 是一个可用于 Web 应用程序的强大的电子表格组件。在集成到 Vue 项目时，如果选择使用 Runtime-only 构建模式，可能会导致构建失败。这主要原因是SpreadJS需要在运行后独立编译。

在 Runtime-only 模式下，Vue 的模板编译器不包含在构建中，而该模式主要依赖于预编译模板。因此，任何需要在客户端编译模板的组件（如 SpreadJS）可能无法正常工作。

为了解决这个问题，您可以选择使用 Runtime + Compiler 构建模式，这个模式包含了 Vue 的完整编译器，允许在客户端编译模板。这样可以确保 SpreadJS 能够正常工作。

或者在webopack增加如下配置也可以解决该报错：

resolve: {
  alias: {
    vue: "vue/dist/vue.js";
  }
}

作者: Grapecity.China | 审核：Clark.Pan | 更新时间：2023.12.24