VueCLIでページローダーを実装したい

##やりたいこと
現在VueCLIを勉強中で、今回はVueCLIのデフォルトのページにページローダーを実装したいと考えています。
実装にはPACEを使っていますが、その読み込みがうまく行きません。VueCLIを使わない場合では正常に動作した為、VueCLI独自の手続きがあるのでしょうか。ご助力のほどよろしくお願い申し上げます。

##バージョン
Vue2
Vue CLi v4.5.6
プリセット :Default ([Vue 2] babel, eslint)

##読み込むファイル
pace.min.js
pace-theme-loading-bar.css

##試したこと。
上記の2ファイルを新しく作成したstaticディレクトリに設置し、index.htmlのheadタグ内で読み込みましたが動作せず、エラーが出力されました。

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <!-- pace.js cssの読み込み -->
    <script src="../static/pace.min.js"></script>
    <link rel="stylesheet" href="../static/pace-theme-loading-bar.css">

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

##エラー

Uncaught SyntaxError: Unexpected token '<'

##主要なディレクトリ構成

testLoader/
    ├─src/
    |   ├─App.vue
    |   └─main.js
    |
    ├─static/
    |    ├─pace.min.js
    |    └─pace-theme-loading-bar.css
    └─public/
    |     ├─index.html
    |     └─favicon.ico
    |

plasticgrammer

2020/11/19 02:20

build（vue-cli-service build）した後、distフォルダに作成されたファイル（index.html）を開いても同じ結果でしょうか。

Takai999

2020/11/19 09:22

返信ありがとうございます。 buildを試してみたところ無事に表示できました。またPACEのファイルをpublicディレクトリに移動させてindex.htmlから読み込んだところ、ローカルサーバー上でもうまく動作しました！

行動規範の内容に同意します

回答1件

自己解決

ファイルをpublicディレクトリに移動させ、index.htmlで読み込むことで、無事にページローダーを実装できました。

ディレクトリ構成

testLoader/
    ├─src/
    |   ├─App.vue
    |   └─main.js
    |
    └─public/
    |     ├─index.html
    |     ├─favicon.ico
    |     ├─pace.min.js
    |     └─pace-theme-loading-bar.css
    |

投稿2020/11/19 09:27

Takai999

総合スコア1