質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

解決済

1回答

7315閲覧

【Nuxt.js v2.8.1】nuxt generateでエラーが発生します

mogataro

総合スコア12

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

0クリップ

投稿2019/06/12 17:10

前提・実現したいこと

nuxt generateでビルドしたいです。
nuxt generate実行中に以下のエラーメッセージが発生しました。

なお、yarn run devでは問題なく実行できています。

発生している問題・エラーメッセージ

ERROR in ./assets/music/popmusic.mp3 1:3 Module parse failed: Unexpected character '' (1:3) You may need an appropriate loader to handle this file type. Error: Nuxt Build Error Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

該当のソースコード

TheMusic.vue

vue

1<template lang="pug"> 2.racing-music 3 audio#csikospost(v-if="isMusic.csikospost" preload="auto" autoplay) 4 source(src="@/assets/music/popmusic.mp3" type="audio/mp3") 5</template>

nuxt.config.js

js

1extend(config, ctx) { 2 if (ctx.isDev && ctx.isClient) { 3 config.module.rules.push( 4 { 5 test: /.(ogg|mp3|wav|mpe?g)$/i, 6 loader: 'file-loader', 7 }, 8 { 9 enforce: 'pre', 10 test: /.(js|vue)$/, 11 loader: 'eslint-loader', 12 exclude: /(node_modules)/ 13 } 14 ) 15 } 16 }

試したこと

公式ドキュメントを参考にオーディオファイルを扱得るようnuxt.config.js 内でそのデフォルトの設定を拡張しました。
https://ja.nuxtjs.org/faq/webpack-audio-files/

yarn run devで実行はできますが、generateが失敗します。
nuxt.config.jsの設定が謝っているのでしょうか。
あるいは、必要なloaderが足りていないのでしょうか。
ご教示のほどお願いいたします。

補足情報(FW/ツールのバージョンなど)

Nuxt.js v2.8.1
mode: 'spa'

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

nuxtのgenerateコマンドは全ページをあらかじめSSR(サーバーサイドレンダリング)するのですが、if (ctx.isDev && ctx.isClient)としてしまうとサーバーでページを生成するときにそのruleが適用されなくなってしまうからだと思われます。

投稿2019/06/12 18:38

karamarimo

総合スコア2551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mogataro

2019/06/13 01:47

ありがとうございます。 ictx.isDev,ctx.isClientの意味を理解しておらずずっとハマっていました。 大変助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問