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

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

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

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

Nuxt.js

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Netlify

Netlifyは、静的サイトを超高速でホスティングできる高機能なWebサービスです。WordPressといった動的処理を必要としないLPなどの静的Webサイトを公開することが可能。カスタムドメイン設定や無料SSL証明書などの多くの機能を無料で使用できます。

Q&A

0回答

1188閲覧

Netlifyへのデプロイにてのエラーが解決しない。

t_msda

総合スコア30

Vue.js

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

Nuxt.js

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Netlify

Netlifyは、静的サイトを超高速でホスティングできる高機能なWebサービスです。WordPressといった動的処理を必要としないLPなどの静的Webサイトを公開することが可能。カスタムドメイン設定や無料SSL証明書などの多くの機能を無料で使用できます。

0グッド

0クリップ

投稿2021/05/09 10:12

編集2021/05/09 10:31

前提・実現したいこと

バックエンドにLaravel,フロントエンドにNuxtjsを用いた開発物をデプロイする場面でエラが発生しました。
ローカル環境で開発しているときには問題なく開発できたのですがデプロイを行うなかでエラーが発生しました。

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

エラーをよむ限り、const token = 'Bearer ' + cookieparser.parse(req.headers.cookie).tokenのheadersでエラーのようです。何かcookieparserとnetlifyの関係性などでしょうか?

netlify

1──────────────────────────────────────────────────────────────── 26:23:49 PM: 1. Build command from Netlify app 36:23:49 PM: ──────────────────────────────────────────────────────────────── 46:23:49 PM: ​ 56:23:49 PM: $ npm run generate 66:23:49 PM: > xxx_frontend@1.0.0 generate /opt/build/repo 76:23:49 PM: > nuxt generate 86:23:50 PM: [warn] When using `nuxt generate`, you should set `target: 'static'` in your `nuxt.config` 96:23:50 PM: ???? Learn more about it on https://go.nuxtjs.dev/static-target 106:24:03 PM: [error] [BABEL] Note: The code generator has deoptimised the styling of /opt/build/repo/node_modules/bootstrap-vue/src/icons/icons.js as it exceeds the max of 500KB. 116:24:24 PM: [error] /loginBtn 126:24:24 PM: 136:24:24 PM: TypeError: Cannot read property 'headers' of undefined 146:24:24 PM: at Store.nuxtServerInit (store/index.js:53:0) 156:24:24 PM: at Array.wrappedActionHandler (/opt/build/repo/node_modules/vuex/dist/vuex.common.js:853:23) 166:24:24 PM: at Store.dispatch (/opt/build/repo/node_modules/vuex/dist/vuex.common.js:518:15) 176:24:24 PM: at Store.boundDispatch [as dispatch] (/opt/build/repo/node_modules/vuex/dist/vuex.common.js:408:21) 186:24:24 PM: at module.exports.__webpack_exports__.default (.nuxt/server.js:131:0) 196:24:24 PM: at runNextTicks (internal/process/task_queues.js:62:5) 206:24:24 PM: at listOnTimeout (internal/timers.js:518:9) 216:24:24 PM: at processTimers (internal/timers.js:492:7)

該当のソースコード

下記のソースコードはページを読み込むたびにuser情報を取得するコードです。
1.cookieのtokenを取得してheaders情報としてリクエストする。
2.バックエンドから帰ってきた値をuser情報として保存する。

nuxt

1export const actions = { 2 async nuxtServerInit({ commit },{ req }){ 3 const token = 'Bearer ' + cookieparser.parse(req.headers.cookie).token 4 let user = ''; 5 try { 6 user = await this.$axios.$get('/user',{ 7 headers:{ 8 'Authorization': token, 9 'Accept':'application/json' 10 } 11 }) 12 } catch (err) { 13 console.log(err); 14 } 15 commit('setToken',{ token:cookieparser.parse(req.headers.cookie).token}); 16 commit('setUser',user); 17 } 18}

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問