VUE路由器：浏览器尝试打开 <router-link> 作为本地文件

Question

我是Vue-router的新手，无法弄清楚发生了什么问题。 单击导航链接会立即显示所需的组件，但随后浏览器会尝试打开该组件，就好像它是一个文件一样。

例如，单击“徽章！” 链接会导致浏览器尝试打开名为file:///home/travis/.../prototype/dist/badger的本地文件，这当然会导致找不到文件错误。

有什么见解吗？ 我试图仔细地遵循现有的示例。

main.js：

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import Badger from './component/Badger.vue';
import Grid from './component/Grid.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/badger', component: Badger },
    { path: '/grid', component: Grid },
  ]
});

new Vue({
  el: '#app',
  router,
  render: h => h(App),
});

App.vue

<template>
    <div id="app">
        <ul>
            <li>
                <router-link to="/badger">Badger!</router-link>
            </li>
            <li>
                <router-link to="/grid">Data!</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('mounted App component')
        },
        data() {
            // ...
            }
        },
    }
</script>

<style>
    // ...
</style>

Answer 1

当路由器处于history模式时，必须将构建工件从http服务器传递到浏览器，如@bigless所述。

如果您的工作流程需要从本地文件系统中打开构建工件，那么如果您从路由器声明中删除这些行，则可以完成以下操作：

  mode: 'history',
  base: __dirname,

这将使您进入“哈希模式”（默认状态）。 然后可以从http服务器或本地文件系统中加载您的工件。

相关文档： https : //router.vuejs.org/guide/essentials/history-mode.html