显示 Vue.js root URL 的静态 HTML 文件

Question

我是 Vue 的新手，正在尝试找出执行以下操作的最佳方法。

让我们使用 example.com 作为我们的域名。

我们部署了一个 Vue.js 应用程序，允许我们的客户在我们的 Vue.js 应用程序中创建自己的子目录（例如，example.com/user1page 和 example.com/user2page ).现在 example.com 转到 Vue.js 登录页面

Marketing 最近向我们发送了一个主页（纯 HTML/CSS/JS 构建），他们需要在 example.com 上显示。我可以在 Vue 静态资产文件夹中上传该页面的 HTML/CSS/JS 并为 example.com 渲染吗？然后为任何东西渲染我们实际的 Vue.js 应用程序 example.com/*?

由于业务原因，我们不能：

将 vue.js 应用更改为不同的域或子域（因为客户已经发布了页面）
将营销主页更改为不同的域/子域/子目录

顺便说一句，我们正在为我们的 DNS 使用 Clouflare。不幸的是，他们的页面规则无法解决这个问题。

如有任何帮助，我们将不胜感激。

非常感谢！埃德

Answer 1

如果您有权访问它，我会使用网络服务器配置来解决这个问题。在 NGINX 中，您可以使用不同的根文件夹定义不同的位置。

因此，如果用户访问主页，它将是第一个路由并提供静态页面，如果它是客户端页面的正则表达式，它将提供 vue 应用程序（您也可以在此处指定 vue 服务器)

location / {
     root /var/www/static-html-folder;
}
    
location /paths-to-clientpages {
      root /var/www/vuepage;
}

对于位置路径，您可以使用正则表达式来匹配所有路线

Answer 2

我发现在 Netlify 中执行此操作的方法是将以下命令添加到您的 toml 文件中：

[[redirects]]
from = "/"
to = "your marketing page URL"
status = 200
force = true

显示 Vue.js root URL 的静态 HTML 文件

Display static HTML file for Vue.js root URL

javascript

cloudflare

vue.js