Rails + webpacker + 视图："You are using the runtime-only build of Vue where the template compiler is not available."

Question

我创建了一个新的 rails 5.2 应用程序并安装了 vue：

bundle exec rails webpacker:install:vue

在创建一个简单的端点 Home#landing 并将 <%= javascript_pack_tag 'hello_vue' %> 添加到默认布局后，示例应用程序按预期工作。

我做了一些修改：

1) 将 hello_vue.js 修改为

import Vue from 'vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#vueapp',
    data: {
      message: "Hello Vue!"
    }
  })
})

2) 在我唯一的视图中创建并清空 <div id="vueapp"> {{ message }} </div>。

3) 从 app/javascripts.

中删除了 app.vue

据我所知，这也应该有效（这就是我们使用链轮运行的 vue-rails gem 的方式）。现在失败了：

[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.

我不能完全理解发生了什么或失败的原因，因为我的应用程序中没有任何组件或模板可以编译。

Answer 1

vue NPM 包的默认导出仅为运行时。

由于您需要模板编译器，因此您需要将 Vue 导入更改为以下内容，其中包括运行时和模板编译器：

import Vue from 'vue/dist/vue.esm.js';

更多详情：此处https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds

Answer 2

您还可以在 config/webpack/environment.js 文件中定义 vue esm 构建的别名：

const { environment } = require('@rails/webpacker');
const vue =  require('./loaders/vue');

environment.loaders.append('vue', vue);
environment.config.resolve.alias = { 'vue$': 'vue/dist/vue.esm.js' }; // <- add alias
module.exports = environment

然后您将能够像这样导入 vue：

import Vue from 'vue'

Rails + webpacker + 视图："You are using the runtime-only build of Vue where the template compiler is not available."

Rails + webpacker + vue: "You are using the runtime-only build of Vue where the template compiler is not available."

ruby-on-rails

webpack

vue.js

webpacker