为我的应用提供服务时出现空白页（Vue Router 4 - Vue 3）

Posted 2023-02-22

【中文标题】为我的应用提供服务时出现空白页（Vue Router 4 - Vue 3）

【英文标题】：Blank page when serving my app (Vue Router 4 - Vue 3)

【发布时间】：2021-03-24 14:59:12

【问题描述】：

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

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

如果我碰巧重新加载页面或直接导航到 URL，浏览器会抛出错误。我已经添加了这里提到的代码：https://next.router.vuejs.org/guide/essentials/history-mode.html 到我的.htaccess 文件（我在 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.

【问题讨论】：

嗨。当您查看空白页面的来源时，您会看到什么？当您从那里单击/关注 .js / .css 链接时会发生什么？

我只看到标准的 VueJS index.html 代码。当我尝试跟踪 .css 文件链接时，它只会再次将我带到 index.html，但是，地址栏中的地址更改为我所在的路由名称加上 .css 文件的名称（例如：/ docs/1.0/css/chunk-vendors.e0a049f6.css ---- 其中 /docs/1.0/ 是实际路线）

此评论听起来像是从 /docs/1.0/ 而非域根目录提供应用程序。对吗？

嗯。我同意你的回答。但问题是所有内容都上传到了域根目录。它怎么能假设那条路呢？我在哪里可以更改它？

【参考方案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
    : '/'

你可以阅读更多关于publicPathhere的信息

确保您的 .htaccess 也在 /docs/1.0/ 中