Rails + webpacker + vue： "You are using the runtime-only build of Vue where the template compiler is

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

警告]：您正在使用模板编译器不可用的 Vue 仅运行时构建。将模板预编译为呈现函数，或使用编译器包含的构建。

我无法完全理解正在发生的事情或为什么失败，因为在我的应用程序中没有任何组件或模板可供编译。

Answer 1

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

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

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

更多详情：这里 https://v2.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'