VueJS 的 WebPack encore 配置

Question

当我使用 VueJS 和 symfony 提供的捆绑 Webpack encore 从基本的 symfony 应用程序加载页面时出现以下错误

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

所以我需要将 VueJS 的别名更改为 webpack :

resolve: {
  alias: {
    vue: 'vue/dist/vue.js'
  }
}

但我没有在 Webpack Encore 中找到任何可以更改此设置的内容。

Webpack 安可：http://symfony.com/doc/current/frontend.html

Answer 1

将此行添加到您的 package.json 是否解决了问题？

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

这是打包程序的特殊字段。因此，在这里我们将 vue 的默认仅运行时版本替换为其包含编译器的构建。

When you specify a single string for the browser field, it will replace main and be the module entry point. The main field specifies the entry point to the module so by replacing it, you replace the entry point when the module is packaged by a bundler for browser use.

查看规范：https://github.com/defunctzombie/package-browser-field-spec

VueJS 的 WebPack encore 配置

WebPack encore configuration for VueJS

symfony

webpack

vue.js

webpack-encore