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'