如何将 HTML 模板导入 Vue.js 项目？

Posted 2023-02-22

【中文标题】如何将 HTML 模板导入 Vue.js 项目？

【英文标题】：How do I import an HTML template into a Vue.js project?

【发布时间】：2020-03-02 15:35:00

【问题描述】：

我想将我downloaded off the internet 的模板导入我的 vue 项目。该模板有自己的 html、CSS 和 javascript 文件。如何使用 vue-router 访问该项目中的 index.html 而不将它们转换为 vue 组件？

我不确定v-html 是否可行，因为我必须导入 HTML 并将其转换为一个巨大的字符串。

我正在为我的登录页面执行此操作，因此它不需要访问 Vuex 和所有其他复杂性。我只需要将它显示为普通的 HTML。

Here is my folder structure

【问题讨论】：

"我只需要将它显示为普通的 HTML。" - 那你为什么还要使用 VueJS 呢？

@BelminBedak 正如我所说，它仅适用于登录页面。我的应用程序使用 VueJS 运行，但我想要一个漂亮的登录页面，我可以从互联网上下载，除了看起来不错并链接到登录页面之外不需要做任何事情

仍然，如果它与您的 Vue 应用程序完全解耦，为什么需要在您的 Vue 应用程序中导入它？如果你真的想那样做，那么创建新组件，从那里的登录页面中提取 HTML，并指向该组件的路由。

将vue的dist文件夹设置为public/app，最后部署时设置webapp root为public。并确保 public 中的 index.html 是您下载的登陆模板之一。所以，现在，当用户去 / 时，会显示你下载的登陆，但是当他们去 /app 时，会返回 vue 的 build 文件夹的 index.html，从而将他带到 vue 应用程序。

谢谢@Shuvojit！！！你的建议很有魅力。

【参考方案1】：

您可以做的是，从您的 web 应用程序的根目录提供登录页面，并从子文件夹提供 vue 的 dist 文件夹。

例如，您的登陆是从 abc.com/index.html 提供的，而您的 vue 应用是从 abc.com/app/index.html 提供的，您可以使用简单的锚点将用户发送到 vue dist 文件夹。

可行的步骤是 - 1.设置vue的dist文件夹为public/app 2、最终部署时，将webapp root设置为public，并确保public里面的index.html是你下载的登陆模板之一。

所以，现在，当用户去/时，会显示你下载的登陆，但是当他们去/app时，会返回vue的构建文件夹的index.html，从而将他带到vue应用程序。