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

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

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

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

Vue CLI

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

Q&A

解決済

4回答

7223閲覧

Vue.jsの最初のサンプルページをサーバーで確認したい

tara-tail

総合スコア32

Vue.js

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

Vue CLI

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

0グッド

1クリップ

投稿2019/07/06 09:34

編集2019/07/06 09:36

前提・実現したいこと

npm run buildを実行し、「dist」フォルダにできたサンプルのHTMLファイル類を、サーバーにアップして表示したいと思っています。なお、Vueの勉強中で、教則本の「Vue CLIの導入」に従って作業を進めています。

実行したこと

教則本に従い、Vue2.9.6をインストールし、initして新しいプロジェクトを作成しました。
npm run devでローカルホストでページが表示されるのを確認しました。Vue.jsのサンプルページ(Welcome to Your Vue.js App)です。

これをこのままサーバーで確認したいと思い、npm run buildし、「dist」フォルダにできたindex.htmlと「static」フォルダをサーバーにアップしましたが、なにも表示されません。
ローカルでも同じく、何も表示されない状態です。

エラー表示

以下のようなエラーがコンソールに表示されています(あと2つ、同じようなエラーが表示さています)。

“https://www.xxxx.or.jp/static/js/manifest.2ae2e69a05c33dfc65f8.js” からのスクリプトが読み込まれました。しかし、この MIME タイプ (“text/html”) は正しい JavaScript の MIME タイプではありません。

<script> のソース “<script> のソース “https://www.xxxx.or.jp/static/js/manifest.2ae2e69a05c33dfc65f8.js” の読み込みに失敗しました。

質問

まずは、大まかな流れを確認したいと思い、このような手順を行いましたが、そもそもサンプルページをサーバーにアップロードするのが間違っていたのでしょうか?
表示されない原因を教えていただければ助かります。

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

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

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

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

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

guest

回答4

0

Vue CLI 3以降の場合は、webpack.config.jsに書いていた内容は、vue.config.jsに記載するようになったようです。(ファイルがなければ、ルートディレクトリにvue.config.jsを追加してください)

デフォルトでは、HTMLファイルから読み込むファイルを「/css/ファイル名.css」のようにルートからのパスで指定しており、cssの読み込みに失敗するため、以下をvue.config.jsに記載して相対パスで指定するようにしてください。

module.exports = { publicPath: './', };

投稿2019/07/08 06:05

hisamitsu0723

総合スコア59

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

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

tara-tail

2019/07/08 11:26

hisamitsu0723さん、ありがとうございます。hisamitsu0723さんのコメントの情報を元に、色々と調べて自己解決しました。自分の環境の場合CLI 2.xでしたので、CLI 3.xにアップデートした際には活用させていただきたいと思います。
guest

0

自己解決

自己解決しましたので、ご報告します。皆様からのご回答にあるように、「static」フォルダへのパスが絶対パスとなっているのが原因でした。ただ、私の環境の場合、CLI 2.xでしたので、パスの指定の場所が違いました。
CLI 3.xをご使用の方で同じ現象に遭遇された場合は、皆様からの回答を参考にしてください。

解決方法

プロジェクト内の「config」フォルダーにある「index.js」を開きます。そこの「build:」に「assetsPublicPath」が記載されているので、ここの「/」を「./」に変更します。その後、再ビルドします。
これで、ローカルでもサーバーでも問題なく表示されるようになりました。
なお、変更して再ビルドしたとき、index.htmlと一緒に「static」フォルダもサーバーにアップした方が良いようです。

投稿2019/07/08 11:37

tara-tail

総合スコア32

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

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

0

Vue CLI 3.3未満の場合はwebpack.config.js
baseUrlを./に変更してからアップロードしてください。
https://cli.vuejs.org/config/#vue-config-js

Vue CLI 3.3以上はwebpack.config.jsを下記のように修正してから
npm run build生成されたファイルをアップロードしてください。

js

1output: { 2 path: path.resolve(__dirname, './'), 3 publicPath: '/', 4 filename: 'build.js' 5},

投稿2019/07/06 12:20

編集2019/07/06 12:24
yasutomi

総合スコア2937

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

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

tara-tail

2019/07/07 01:33

yasutomiさん、ありがとうございます。記載いただいたファイル名と同じものがなかっため、似た名前のファイル「webpack.base.conf.js」「webpack.dev.conf.js」「webpack.prod.conf.js」を検索しましたが、「baseUrl」の記載がありませんでした。Vue3以上にすれば、そのようなファイルが作成されるでしょうか?当方の環境は、Vueバージョン「2.9.6」です。
退会済みユーザー

退会済みユーザー

2019/07/07 09:12

仰っているのはvue cliバージョンだと思います。vue本体のバージョンは2系が最新です。
guest

0

まずはローカルで検証できてからサーバにアップしましょう。

「dist」フォルダにできたindex.html

のファイルをChromeで開いて想定通りに表示できませんか?

投稿2019/07/06 09:40

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

tara-tail

2019/07/07 01:05

dyoshikawaさま、ありがとうございます。当方Firefoxで確認していました。Chromeでも開いてみましたが、やはり画面が真っ白で同様なエラーがでました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問