运行在 vue.js 中构建后，它在 Github 页中提供后生成一个空白页面

Question

构建后出现这些错误：

在 GitHub 页面中托管时出错： Failed to load resource: the server responded with a status of 404 () /e-library/js/app.af7a444d.js:1

本地打开错误： Access to script at 'file:///D:/Office%20Files/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.

但是运行在服务器上它工作得很好。

我的 index.html 文件：

<!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>

我试过 publicPath:

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

我是不是漏掉了什么？

Answer 1

我通过在 vue.config.js 中添加这行代码修复了它：

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

运行在 vue.js 中构建后，它在 Github 页中提供后生成一个空白页面

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

github-pages

vue.js

vuetify.js

运行 在 vue.js 中构建后，它在 Github 页中提供后生成一个空白页面

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

github-pages

vue.js

vuetify.js

运行在 vue.js 中构建后，它在 Github 页中提供后生成一个空白页面