如何使用带有模板编译器的 Vuejs 和 Webpack

How to use Vuejs with template compiler with Webpack

我正在使用 Webpack。

我大致按照本教程将 Vuejs 配置到我的构建中:https://medium.com/js-dojo/how-to-configure-webpack-4-with-vuejs-a-complete-guide-209e943c4772

我能够让它工作,但是当我尝试呈现模板时,出现错误(在浏览器中):"You are using the runtime-only build of Vue where the template compiler is not available."。

node_modules下的实际Vuejs安装有几个变体,包括带有编译器的完整包,这就是我想要的。

但是,Webpack 决定包含运行时版本。

我又摸了一下,发现如果我修改node_modules/vue/package.json,把它的main键从dist/vue.runtime.common.js改成dist/vue.common.js,它的moduledist/vue.runtime.esm.jsdist/vue.esm.js 的密钥 - Webpack 确实选择了完整版本。

我正在寻找一种在不改变 Vue 自身的情况下获得这种效果的方法 package.json。 我发现了这个: How do I override nested NPM dependency versions? ,并尝试了接受的答案,但它似乎没有任何效果。

谁能告诉我 "right way" 实现我的目标,即让 Webpack 包含完整版本的 Vuejs,而不仅仅是运行时?

你要找的答案在Vue的安装中:

https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds

In the dist/ directory of the NPM package you will find many different builds of Vue.j...

Runtime: code that is responsible for creating Vue instances, rendering and patching virtual DOM, etc. Basically everything minus the compiler...

Runtime + Compiler vs. Runtime-only If you need to compile templates on the client (e.g. passing a string to the template option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build