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

Question

我是 Vue-router 的新手，不知道哪里出了问题。单击导航 link 会立即显示所需的组件，但随后浏览器会尝试打开该组件，就好像它是一个文件一样。

例如，单击 "Badger!" link 会导致浏览器尝试打开名为 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,

这将使您进入 "hash mode"（默认状态）。然后可以从 http 服务器或本地文件系统加载您的工件。

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

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

vue-router: browser attempts to open <router-link> as a local file

javascript

vue.js

vue-router

vuejs2