前提・実現したいこと
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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/09/30 04:09