为我的应用程序提供空白页面（Vue Router 4 - Vue 3）

Question

我第一个 npm run build 将我的第一个大型 Vue3 应用程序带到真实世界的服务器试驾中。

所以我得到了文件，将它们上传到我的 VPS，然后惊喜：如果我通过点击导航，服务器只会识别路由路径。

如果我碰巧重新加载页面或直接导航到 URL，浏览器会抛出错误。我已将此处引用的代码添加到我的 .htaccess 文件中：https://next.router.vuejs.org/guide/essentials/history-mode.html（我在 Centos 7 上使用 apache 我正在使用 CWP)，但问题仍然存在，唯一的区别是它没有抛出错误，而是卡在 index.html 页面中，但没有呈现任何内容。

我不知道我做错了什么。

请检查我下面关于 Vue Router 4 实现的代码。

我在 main.js 文件中定义所有内容，如下所示：

import { createRouter, createWebHistory } from "vue-router"
import Page from "./views/Page.vue"
import Content from "./views/Content.vue"
import BaseSection from "./components/BaseSection.vue"

//ROUTER
const router = createRouter({
    history: createWebHistory(),
    routes: [{
            path: "/",
            name: "Home",
            component: Page,
            meta: {
                title: 'Home'
            }
        },
        {
            path: "/docs/1.0/:title",
            component: Content,
            name: "docs"
        }
    ],
    scrollBehavior(to) {
        if (to.hash) {
            return {
                el: to.hash,
                behavior: 'smooth',
            }
        }
    }
});

app.use(router);

有什么想法或建议吗？我要疯了。

谢谢。

此致， T.

Answer 1

空白页错误通常发生在从域根以外的其他地方提供应用程序时。在这种情况下，必须相应地配置 Vue CLI。在项目根目录下修改vue.config.js（不存在则创建）：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/docs/1.0/'  // This is whatever your path from the root is
    : '/'
}

您可以阅读更多关于 publicPath here

确保你的.htaccess也在/docs/1.0/

为我的应用程序提供空白页面（Vue Router 4 - Vue 3）

Blank page when serving my app (Vue Router 4 - Vue 3)

javascript

vue.js

vue-router

vue-cli

vuejs3