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://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 + vue：“您正在使用Vue的仅运行时构建，其中模板编译器不可用。”

2 个答案: