有没有办法使用 Vue 路由器路由到 html 文件？答案

【问题标题】：Is there a way to route to html files with Vue router?有没有办法使用 Vue 路由器路由到 html 文件？
【发布时间】：2019-04-10 00:26:45
【问题描述】：

您好，我正在使用 VueJS 和 webpack 模板。我有一堆组件可以用 Vue Router 轻松展示。但是，我的组织使用 Robot Framework 进行测试，我们使用以下命令生成 HTML 页面：

python -m robot.testdoc /tests/directory /destination.html

这基本上是我使用路由器的方式：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main.vue'
import Component1 from '@/components/Component1.vue'
import Component2 from '@/components/Component2.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      mode: history,
      name: 'Main',
      component: Main
    },
    {
      path: '/component1',
      mode: history,
      name: 'Component1',
      component: Component1
    },
    {
      path: '/component2',
      mode: history,
      name: 'Component2',
      component: Component2
    }
  ]
})

有没有办法使用 Vue Router 路由到 HTML 文件？

【问题讨论】：

标签： html vue.js vue-component robotframework vue-router

【解决方案1】：

首先你需要html-loader:

yarn add html-loader | npm install html-loader

然后您需要更新您的webpack.config.js 文件并在您的rules 中添加一个条目来处理.html 扩展：

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

然后您可以像导入组件一样导入您的 .html 文件：

import Destination from '/path/to/destination.html'

现在将component 视为对象并利用template 属性提供静态HTML 文件：

 {
  path: '/destination',
  mode: history,
  name: 'destination',
  component: { template: Destination }
}

【讨论】：

我有三个webpack配置js文件：webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js。我假设我必须将它添加到所有三个？
使用 Vue CLI 3 生成的项目会更容易实现吗？
@KevinPatrick 如果将base 导入到prod 和dev 文件中，那么您可以在base 中执行此操作。在 Vue CLI 3 中做这件事本身并不会让它变得更容易，只是一个不同的配置。
好的，我在base 中进行了更改，它基本上提供了一个空白的html页面。 component: { template: Destination } 是否将文件包装在 <template></template 中？

【解决方案2】：

1.安装html-loader

npm install --save-dev html-loader

2.使用下面的代码 vue.config.js 或 Webpack.config.js

对于 webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
    ],
  },
};

对于 Vue cli 用户 vue.config.js

module.exports = {
    chainWebpack: config => {
        config.module
          .rule('html')
          .test(/\.html$/)
          .use('html-loader')
          .loader('html-loader')
      }
}

只需在您的路由器中添加路由器

{
        path: '/print',
        name: 'print',

        component: () => import('../pages/print.html'),

    },

【讨论】：