山崎屋の技術メモ

IT業界で働く中でテクノロジーを愛するSIerのシステムエンジニア👨‍💻 | AndroidとWebアプリの二刀流🧙‍♂️ | コードの裏にあるストーリーを綴るブログ執筆者✍️ | 日々進化するデジタル世界で学び続ける探究者🚀 | #TechLover #CodeArtisan、気になること、メモしておきたいことを書いていきます。

【Vue】js で template を使いたくてハマった

まずバージョン情報。

  • vue : 2.6.10
  • vue-cli : 3.7.0
  • node : 10.11.0
  • npm : 6.4.1

Vue cli を使って「vue create app-name」とかやってプロジェクトを作成すると、デフォルトでは Vue の単一ファイルコンポーネントを使うプロジェクトが作成されます。

普段は単一ファイルコンポーネントのみで作っているので知らなかったのですが、 js で component を動的に作らなくてはいけない場面に遭遇しました。

js で component を作る簡単な例です。

<template>
  <div>
    <comp></comp>
  </div>
</template>

<script>
let comp = {
  template: "<div>hoge</div>"
}
export default {
  components: {
    comp:comp
  }
};
</script>

これで実行するとブラウザに hoge と表示されるはずなのですが、いろいろ試しても画面は真っ白のままです。chrome だとエラーログも出ません。3 時間くらいハマりました(泣)。

firefox でアクセスしてみたらコンソールに以下のワーニングが出ていて解決の糸口がつかめました。
「You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.」

ただし、いくらググってもバージョンの差異が原因で解決できません。 webpack の設定ファイルに alias を追加すれば良いらしいのですが いまのバージョンでは webpack.confi.js 自体存在しないのでどうしたものか悩みました。

結論としては main.js で import している Vue のビルドを変更します。

修正前:

import Vue from "vue";

修正後:

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

修正前ではランタイム限定版のビルドがインポートされるようです。

公式にもちゃんと書いてありますね。
インストール — Vue.js

本日は以上です。
 

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js入門 基礎から実践アプリケーション開発まで