Home > front end >  After running a build in vue.js, it makes a blank page after serving it in Github Pages
After running a build in vue.js, it makes a blank page after serving it in Github Pages

Time:04-04

These errors occur after the build:

Error from hosting in GitHub pages: Failed to load resource: the server responded with a status of 404 () /e-library/js/app.af7a444d.js:1

Error from opening it locally: Access to script at 'file:///D:/Office Files/Projects/eLibrary/e-library/dist/js/chunk-vendors.0aa8295f.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

But running on the server it works perfectly.

My index.html file:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" href="favicon.ico">
    <title>e-library</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
    <script defer="defer" type="module" src="js/chunk-vendors.8ef93056.js"></script>
    <script defer="defer" type="module" src="js/app.af7a444d.js"></script>
    <link href="css/chunk-vendors.82c260bb.css" rel="stylesheet">
    <link href="css/app.3dfcde27.css" rel="stylesheet">
    <script defer="defer" src="js/chunk-vendors-legacy.8c436468.js" nomodule></script>
    <script defer="defer" src="js/app-legacy.687726a0.js" nomodule></script>
</head>

<body><noscript><strong>We're sorry but e-library doesn't work properly without JavaScript enabled. Please enable it to
            continue.</strong></noscript>
    <div id="app"></div>
</body>

</html>

I tried publicPath:

module.exports = {   publicPath: '',   transpileDependencies: [     'vuetify'   ] }

Did I miss something?

CodePudding user response:

I fixed it by adding this line of code in vue.config.js:

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === 'production'
   ? '/e-library/'
   : '/'
  • Related