vue-cli 3 pages config will serve javascript but does not fire it

Viewed 889

I'm running into an issue when trying to use the pages config for vue-cli v3.

I have two pages setup, my index page and a test page:

pages: {
        index: {
        entry: "src/main.js",
        template: "public/index.html",
        filename: "index.html",
        title: "Index Page",
        chunks: ["chunk-vendors", "chunk-common", "index"]
    },
        "test-case-study": {
        entry: "src/subpage/test-case-study.js",
        template: "public/test-case-study.html",
        filename: "test-case-study.html",
        title: "Test case study",
        chunks: ["chunk-vendors", "chunk-common", "test-case-study"]
    }
}

I have my entry point files and templates in the (I'm assuming) correct spots:

file locations

And when I run npm run serve and navigate to the test page (http://localhost:8080/test-case-study.html) to check, the markup loads correct, the javascript file comes through successfully in the network tab, but I get the error

The resource http://localhost:8080/test-case-study.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

The script tag is getting added to the head successfully:

script tag added

And when I look in the source tab at the javascript it all looks correct and I can see the evaluate function call with my custom javascript, but nothing ever fires.

UPDATE

I ran an build and checked the output of the dist/test-case-study.html file and it looks like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <meta http-equiv=X-UA-Compatible content="IE=edge">
        <meta name=viewport content="width=device-width,initial-scale=1">
        <title>Test case study</title>
        <link href=/js/chunk-vendors.96f8ab67.js rel=preload as=script>
        <link href=/js/test-case-study.d382d007.js rel=preload as=script>
    </head>
    <body>
        <h1>hi</h1>
        <div id=app></div>
        <script src=/js/chunk-vendors.96f8ab67.js></script>
        <script src=/js/test-case-study.d382d007.js></script>
    </body>
</html>

It's weird that the javascript is being pulled in twice, and I still don't get why it wouldn't fire. You'd think it would fire more than once vs not at all.

Is there something I'm missing from my config?

0 Answers
Related