将html页面连接到vue页面

Posted 2023-02-22

【中文标题】将html页面连接到vue页面

【英文标题】：Connecting html pages to vue page

【发布时间】：2020-01-10 09:37:51

【问题描述】：

我使用 vue.js 创建了一个仪表板，但我之前使用基本的 html 和 CSS 创建了简单的网页。是否有任何方法可以通过单击按钮将 Html 页面重定向到 vue 仪表板。 Vue仪表板是一个不同的项目

【参考方案1】：

通过简单地创建一个组件并将静态 HTML 代码复制粘贴到组件template 中，将静态 HTML 页面转换为一个组件会更好更容易，但是如果您坚持将文件导入为 HTML 格式，您可能需要安装一个名为 html-loader 的软件包：

yarn add html-loader | npm install html-loader

然后你需要更新你的webpack.config.js 文件：

   test: /\.(html)$/,
   exclude: /(node_modules)/,
   use: 
   oader: "html-loader"
   

然后你导入 HTML 文件：

 import FileName from '/path/to/yourFilePath.html'

最后将模板嵌套在路由器配置中：

 
  path: '/path',
  name: 'routeName',
  component:  template: FileName