VueJS：使用静态HTML文件

Question

我是很新的Vue和我建立一个网络面板，我需要一个登录页面。然而，由于登录无关与我建立（在外观，导航等方面）的单个页面的Web面板，它采用一种完全不同的模板，我想它封装在一个完全不同的静态HTML文件。

我怎么能起到旁边的Vue默认Index.Html静态HTML文件？是否可能？

Answer 1

您可以使用静态资产文件夹该任务。

vue cli 2.x

有两种资产的文件夹在默认情况下：static（“真正的”静态资产）的应用程序的根和src/assets（Webpacked资产）

第一个是你可以使用的东西，我想。从https://vuejs-templates.github.io/webpack/static.html报价

相比之下，在static/文件不受的WebPack在所有加工：它们直接复制到他们的最终目的地，不被用相同的文件名。您必须使用绝对路径，这是由config.js加入build.assetsPublicPath和build.assetsSubDirectory确定的参考这些文件。

任何静态资产和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>标签。

Answer 2

你要完成什么应该在后台完成。

伪代码：

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

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

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