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

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

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

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

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

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

解決済

1回答

1341閲覧

SpringとNuxt.jsの同梱の設定で画面が表示されない

kharu

総合スコア2

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

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

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

0グッド

0クリップ

投稿2020/09/28 09:10

前提・実現したいこと

SpringBootとNuxt.jsでWEB画面の開発をしています。
サーバーサイドはlocalhost:8080で開発し、
フロントサイドはlocalhost:3000で画面の開発をしています。
最終的にはNuxt.jsでビルドしたソースをSpringBootのresouces/staticにコピーし
Tomcatで動かす予定です。

発生している問題

Nuxt.jsでビルドしたソースをSpringBootのresouces/staticにコピーし
localhost:8080で画面を開いたときに正常に初期画面が表示されません。

ブラウザの開発者ツールで確認すると
DEMO/           ・・・ StatuCode 200
499a6a46b95901780c9a.js ・・・ StatusCode 404
f15e57b4e2d821d2098e.js ・・・ StatusCode 404
・・・
と出ておりjsファイルが見えない状況?になっているようです。
ブラウザで画面を開くと初期画面は開いているようですが、ローディングのアニメーション
(くるくるしたやつ)がまわっている状況です。
考えられることは何かないでしょうか。

以下のサイトを参考に作成しました。
https://qiita.com/mr-hisa-child/items/9560d89a0515a725776a

該当のソースコード

■nuxt.config.js export default { mode: 'spa', /* ** Headers of the page */ head: { title: process.env.npm_package_name || '', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } ], link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] }, /* ** Customize the progress-bar color */ loading: { color: '#fff' }, /* ** Global CSS */ css: [], /* ** Plugins to load before mounting the App */ plugins: [ { src: '~/plugins/axios/axios' } ], /* ** Nuxt.js dev-modules */ buildModules: [ // Doc: https://github.com/nuxt-community/eslint-module '@nuxtjs/eslint-module' ], /* ** Nuxt.js modules */ modules: [ // Doc: https://axios.nuxtjs.org/usage '@nuxtjs/axios', '@nuxtjs/proxy' ], /* ** Axios module configuration ** See https://axios.nuxtjs.org/options */ axios: { proxy: true, debug: true }, proxy: { '/server_url': { target: 'http://localhost:8080/DEMO/', pathRewrite: { '^/server_url': '/' } } }, /* ** Build configuration */ build: { /* ** You can extend webpack config here */ extend(config, ctx) { if (ctx.isDev && ctx.isClient) { config.devtool = '#cheap-module-inline-source-map' } } }, }

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

SpringBoot 2.2.7.RELEASE
Nuxt.js @nuxt/cli v2.12.2

画面を開いたときの状況↓↓↓
イメージ説明

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

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

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

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

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

guest

回答1

0

ベストアンサー

Nuxt側のソースが/DEMOというパスで作成されてないのでは?
またはSpring側で/DEMOというパスを外す必要があるかと。

/DEMO/499a6a46b95901780c9a.js
/DEMO/f15e57b4e2d821d2098e.js

で取得できませんか。

単純にresouces/static/DEMOを作って、
そこにNuxtのソース置けばいいかもしれませんが、
Nuxt側のソースが複雑になってくるとダメになるかもしれません。

投稿2020/09/28 13:10

szk.

総合スコア1400

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

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

kharu

2020/09/30 04:09

回答ありがとうございます。 パスをきちんと通すことで無事表示されることが出来ました。 時間がかかって困っていましたが、ご指摘して頂いたおかげで 修正することが出来ました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問