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

Posted 2023-02-22

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

【英文标题】：Rails + webpacker + vue: "You are using the runtime-only build of Vue where the template compiler is not available."

【发布时间】：2018-11-01 13:45:21

【问题描述】：

我创建了一个新的 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。

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

[Vue 警告]：您正在使用仅运行时构建的 Vue，其中模板编译器不可用。要么将模板预编译成渲染函数，要么使用编译器包含的构建。

我无法准确理解正在发生的事情或失败的原因，因为在我的应用程序中没有要编译的任何组件或模板。

【参考方案1】：

您还可以在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'

【讨论】：

非常好！我正在尝试environment.resolve.alias（即缺少config）。

【参考方案2】：

vue N​​PM 包的默认导出仅是运行时。

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

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

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

【讨论】：

哇 - 节省了我很多时间。我没有得到像 OP 这样的警告并且迷路了。非常感谢！