【问题标题】：VueJS: Using static HTML filesVueJS：使用静态 HTML 文件
【发布时间】：2018-03-30 11:33:10
【问题描述】：

我是 Vue 的新手，我正在构建一个需要登录页面的 Web 面板。但是，由于该登录与我正在构建的单页 Web 面板（在外观、导航等方面）无关，并且它使用完全不同的模板，我想将它封装在一个完全不同的静态 HTML 文件中.

如何在 Vue 中的默认 Index.Html 旁边提供静态 HTML 文件？这可能吗？

【问题讨论】：

这只是您的服务器交付该文件的问题。
@connexo：问题是，当我将 URL 传递给该文件时，它会自动成为 /#/ 路径的一部分。是的，它不起作用。
如果你使用 webpack，你可以为特定路由预渲染静态 HTML 文件。查看 ; github.com/chrisvfritz/prerender-spa-plugin
@VamsiKrishna：对插件不感兴趣，我更喜欢纯 Vue 解决方案，只是为了防止将来发生冲突
@Arrrr 你在用 webpack 吗？

标签： vue.js

【解决方案1】：

您可以为该任务使用静态 assets 文件夹。

vue cli 2.x

默认有两个资产文件夹：应用根目录中的static（“真实”静态资产）和src/assets（Webpacked资产）

我认为第一个是您可以使用的。引用https://vuejs-templates.github.io/webpack/static.html

相比之下，static/ 中的文件根本不被 Webpack 处理：它们被直接复制到它们的最终目的地，与相同的文件名。您必须使用绝对路径引用这些文件，这是通过加入build.assetsPublicPath 和 build.assetsSubDirectory 在 config.js 中。

任何静态资源和 html 也可以放在这里，何乐而不为。可以使用绝对路径访问它们，例如在开发环境和默认配置中：

http://localhost:8080/static/login.html

vue cli 3

新的 vue cli 版本有一些变化。 “真正的”静态资产目录（不被 Webpack 处理）现在是 public。引用自：https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

静态资产处理静态资产有两种不同的处理方式：

在 JavaScript 中导入或通过相对路径在模板/CSS 中引用。此类引用将由 webpack 处理。

放置在public 目录中并通过绝对路径引用。这些资产将被简单地复制而不通过 webpack。

还要检查此建议！：

请注意，我们建议将资产作为模块依赖项的一部分导入图表，以便他们将使用以下内容通过 webpack 好处：

脚本和样式表被缩小并捆绑在一起以避免额外的网络请求。

缺少文件反而会导致编译错误为您的用户带来 404 错误。

结果文件名包含内容哈希因此您无需担心浏览器会缓存其旧版本。

何时使用公用文件夹

您需要在构建输出中具有特定名称的文件。

您有数千张图片，需要动态引用它们的路径。

某些库可能与 Webpack 不兼容，您别无选择，只能将其包含为 <script> 标记。

【讨论】：

如果我不希望 static 成为路径的一部分怎么办？这不是一个好的解决方案，尽管我可能会工作。
这显然是最好的答案，并帮助我获得了每个问题的快速静态 HTML 文件。值得点赞。

【解决方案2】：

你想要完成的事情应该在后端完成。

伪代码：

if (user.isLoggedin) {
   res.send('vue/index.html')
} else {
   res.send('loginpanel/index.html')
}

这样，两个站点的path 将相同。

后端的实现细节取决于您选择的技术栈。

【讨论】：