web-dev-qa-db-ja.com

Rails + webpacker + vue： "テンプレートコンパイラが利用できない場合、Vueのランタイムのみのビルドを使用しています。"

私は新しいRails 5.2アプリケーションを作成してインストールしましたvue with：

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ジェムを使用していた方法です）。今は失敗しています：

[Vue warn]：Vueのランタイムのみのビルドを使用していますが、テンプレートコンパイラを使用できません。テンプレートをレンダリング関数にプリコンパイルするか、コンパイラに含まれるビルドを使用してください。

アプリでコンパイルするコンポーネントやテンプレートがないため、何が起こっているのか、なぜ失敗しているのかを正確に理解できません。

ruby-on-railswebpackvue.jswebpacker
12
pragmatic_programmer

vue NPMパッケージのデフォルトのエクスポートはランタイムのみです。

テンプレートコンパイラが必要な場合は、Vueインポートを次のように変更する必要があります。これには、ランタイムとテンプレートコンパイラの両方が含まれます。

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

詳細：こちら https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds

19
nstCactus

vue esm build in config/webpack/environment.jsファイルにエイリアスを定義することもできます：

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'
9
zinovyev