VueJS：使用静态HTML文件

Question

我对Vue相当陌生，并且正在构建一个Web面板，为此我需要一个登录页面。但是，由于该登录名与我正在构建的单页Web面板无关（在外观，导航等方面），并且使用了完全不同的模板，因此我希望将其封装在一个完全不同的静态HTML文件中。

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

Answer 1

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

Vue cli 2.x

默认情况下有两个资产文件夹：static应用根目录中的 ("Real" Static Assets) 和src/assets(Webpacked Assets)

第一个是你可以使用的，我想。引自https://vuejs-templates.github.io/webpack/static.html

相比之下，static/Webpack 根本不处理in中的文件：它们会按原样直接复制到最终目的地，并具有相同的文件名。您必须使用绝对路径来引用这些文件，这由加入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>标签包含在内。