Thing I want to do

I'm currently studying VueCLI and this time I want to implement a page loader on the default page of VueCLI.
For implementationPACEI'm using, but it doesn't load. If i don't use VueCLI, it works normally, so is there a procedure unique to VueCLI? Thanks for your support.


Vue CLi v4.5.6
Preset: Default ([Vue 2] babel, eslint)

File to read


I tried it.

I placed the above two files in the newly created static directory and read them in the head tag of index.html, but they did not work and an error was output.

<! DOCTYPE html>
  <meta charset = "utf-8">
  <meta http-equiv = "X-UA-Compatible" content = "IE = edge">
  <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
  <!-Load 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>
    <strong>We're sorry but<% = htmlWebpackPlugin.options.title%>doesn't work properly without JavaScript enabled. Please enable it to continue.</Strong>
  <!-Built files will be auto injected->
Uncaught SyntaxError: Unexpected token'<'
Main directory structure
testLoader /
    ├─src /
    | ├─App.vue
    | └─main.js
    ├─static /
    | ├─pace.min.js
    | └─ pace-theme-loading-bar.css
    └─public /
    | ├─index.html
    | └─favicon.ico