Rails + webpacker + vue：“您正在使用Vue的仅运行时构建，其中模板编译器不可用。”

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 N​​PM包的默认导出仅为运行时。

当您需要模板编译器时，需要将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 build的别名：

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'