前提
rollup.js及びvuejs初心者です。
質問
rollup.jsを使い、vue.jsの「単一ファイルコンポーネント」を作ってみようとやっているのですが、
エラーが発生し、うまくいきません。
この原因をご教示いただけますと幸いです。
単一ファイルコンポーネント用の.vueファイル「resources/js/components/TestComponent.vue
」
<template> <div class="example">{{ message }}</div> </template> <script> export default { data () { return { message: 'Hello world!' } } } </script> <style> .example { color: red; } </style>
(おそらく)単一ファイルコンポーネントにrollupjsがコンパイルする際に、
Vueのコンポーネントととして登録するようの設定ファイル「resources/js/main.js
」
import TestComponent from '/resources/js/components/TestComponent.vue'; Vue.component('TestComponent', TestComponent);
rollup.jsのコンフィグファイル「rollup.config.js
」
import json from 'rollup-plugin-json'; import vue from 'rollup-plugin-vue'; import commonjs from 'rollup-plugin-commonjs'; export default [ // rollupjs { input: 'resources/js/main.js', output: { name: 'main', file: 'public/js/bundle.js', format: 'iife' }, plugins: [ commonjs(), vue() ] }, ];
vueファイルを読み出すHTMLファイル「index.html
」
<!doctype html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="/js/bundle.js"></script> </head> <body> <div id="app"> <TestComponent></TestComponent> </div> <script> window.onload = function () { var vm = new Vue({ el: "#app", }); } </script> </body> </html>
上記コードは、
- [ブログ
Vue.jsの単一ファイルコンポーネントをrollupでバンドルする](https://www.bit-hive.com/articles/20190608)
を参考に試行錯誤しながら作成しました。
かれこれ4時間位格闘していますがエラーで全然動かず……
ビルドは通っているのですが、
ブラウザのコンソールで以下のエラーが出ております。
ReferenceError: TestComponent is not defined
何が足りていないのでしょうか…?
お知恵をお貸しいただけますと幸いです。
よろしくお願いいたします。

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/04 09:32
退会済みユーザー
2019/08/04 09:40
2019/08/04 09:42
退会済みユーザー
2019/08/04 09:47
2019/08/04 09:51
2019/08/04 11:06
退会済みユーザー
2019/08/04 14:55
2019/08/05 10:22
退会済みユーザー
2019/08/05 10:30
2019/08/05 10:30