vue-router：浏览器尝试打开 作为本地文件

Question

我是Vue-router的新手，无法弄清楚出了什么问题。单击导航链接会导致所需组件暂时显示，但浏览器会尝试打开组件，就像它是文件一样。

例如，点击“Badger！”链接导致浏览器尝试打开名为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