在vue.js、vue-router和webpack中加载静态html文件

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/static-html',
      component: () => import('./components/StaticHtml.vue')
    }
  ]
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

<!-- App.vue -->
<template>
  <div>
    <h1>Vue.js App</h1>
    <router-link to="/static-html">Load Static HTML</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<!-- StaticHtml.vue -->
<template>
  <div>
    <h2>Static HTML Page</h2>
    <div v-html="staticHtml"></div>
  </div>
</template>

<script>
export default {
  name: 'StaticHtml',
  data() {
    return {
      staticHtml: ''
    }
  },
  mounted() {
    this.loadStaticHtml()
  },
  methods: {
    loadStaticHtml() {
      // 使用axios或其他方式加载静态html文件
      // 将加载的html内容赋值给staticHtml变量
    }
  }
}
</script>