Is there a way to route to html files with Vue router?

Question

Hello I am using VueJS and the webpack template. I have a bunch of components I can easily display with Vue Router. However, my organization uses Robot Framework for testing and we generate an HTML page using the command:

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

This is basically how I am using the router:

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
    }
  ]
})

Is there a way to route to an HTML file using Vue Router?

Solution 1

First you'll need html-loader:

yarn add html-loader | npm install html-loader

Then you need to update your webpack.config.js file and add an entry to your rules to handle .html extensions:

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

Then you can import your .html files like you would components:

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

Now treat component as an Object and leverage the template property to serve static HTML files:

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

Solution 2

1.install html-loader

npm install --save-dev html-loader

2.use below code vue.config.js or Webpack.config.js

For webpack.config.js

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

For Vue cli users vue.config.js

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

just add router in your

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

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

    },

more about vue https://cli.vuejs.org/guide/webpack.html#replacing-loaders-of-a-rule

Comments

[Kevin Patrick]

I have three webpack configuration js files: webpack.base.conf.js, webpack.dev.conf.js, and webpack.prod.conf.js. I am assuming I have to add it to all three?

[Kevin Patrick]

Would it be easier to implement with a Vue CLI 3 generated project?

[Ohgodwhy]

@KevinPatrick if base is being imported into the prod and dev files, then you can just do it in base. Doing it in Vue CLI 3 wouldn't make it any easier, per se, just a different configuration.

[Kevin Patrick]

Okay, i made the changes in base and it basically served a blank html page. does component: { template: Destination } wrap the file in <template></template ?