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

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

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

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

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Q&A

解決済

2回答

983閲覧

vueとLaravelで作ったプロダクトをレンタルサーバーにデプロイしてもvueが表示されない

CCHH

総合スコア11

Vue.js

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

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

0グッド

0クリップ

投稿2020/03/21 17:21

編集2020/03/22 01:55

前提・実現したいこと

Laravelとvueで作ったプロダクトをレンタルサーバーにデプロイしたい!
プロダクト自体はデプロイできましたが、vueが一切表示されません。

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

特にエラーメッセージはありません。
画面が表示されません。

試したこと

自分なりに調べていく内に、vueで作ったものをサーバーにデプロイする前に、

bash

1npm run buid

をする必要があったみたいなので、実施してみたのですが、

bash

1npm ERR! missing script: build

というエラーが出ます。
調べてみると package.jsonが影響しているらしく、package.jsonを確認した所、scriptの中に buildはありません。
ダメもとでscript内にbuildを追加してみましたが、

bash

1npm ERR! code EJSONPARSE 2npm ERR! file /Applications/hoge/hogehoge/hogehogehoge/package.json 3npm ERR! JSON.parse Failed to parse json 4npm ERR! JSON.parse Unexpected token } in JSON at position 987 while parsing near '...lopment.build", 5npm ERR! JSON.parse }, 6npm ERR! JSON.parse "devDependenc...' 7npm ERR! JSON.parse Failed to parse package.json data. 8npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.

と表示されます。

またLaravelのデフォルトで入っている、 npm run prod も試した後にサーバーへアップロードしましたが変わりません。

素人の感覚ではやはりnpm run build が怪しいなと勝手に思っていますが、それで正しいのかどうか、
また正しい場合、script内にどう追加すれば良いかがわかりませんでした。

お力添え頂けると幸いです。
よろしくお願いします。

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

@vue/cli 4.2.3
vue@2.6.11

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

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

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

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

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

guest

回答2

0

自己解決

pathが間違っていたようで自己解決しています。

投稿2020/08/27 22:22

CCHH

総合スコア11

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

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

0

Laravelのpackage.jsonにはこれ

"scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" },

開発時のビルドはnpm run development(省略形ならdev)
本番用のビルドはnpm run production(省略形ならprod)

ドキュメントに書いてあることでしかない。
https://readouble.com/laravel/7.x/ja/mix.html

投稿2020/03/22 00:22

kawax

総合スコア10377

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

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

CCHH

2020/03/22 01:52

ご返信ありがとうございます。 私の記入漏れです。 こちら実施済みになります。 それでもvueが全く表示されていないので困っています。
CCHH

2020/03/22 01:56

私の投稿漏れのため npm run prod 実施済みの旨を追記しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問