Javascript vue路由器：浏览器尝试打开<；路由器链路>；作为本地文件

我是Vue路由器的新手，不知道出了什么问题。单击导航链接会使所需组件显示一瞬间，但浏览器会尝试打开该组件，就像打开文件一样

例如，单击“獾！”链接会导致浏览器试图打开名为

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>

獾


数据！


导出默认值{
安装的（）{
console.log（'装入的应用程序组件'）
},
数据（）{
// ...
}
},
}
// ...

当路由器处于

历史记录

模式时，构建工件必须从http服务器发送到浏览器，如@bigless所述

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

  mode: 'history',
  base: __dirname,

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

---

相关文档：

看起来您是直接从本地文件系统而不是http运行应用程序。请检查

\uuuuDirName

的值，查看

基：\uuuDirName，

这可能是原因。@bigless是的。理想情况下，构建将生成一个工件，我可以从文件系统或服务器打开它。不可能使用nginx或其他文件系统在“/”上提供app.html。简单地说，文件系统不适合http路由环境。通过http为您的应用程序提供服务，并让我们知道它是否有效。非常好，这是在没有http的本地文件系统上运行的必备工具。另外，对于Vue 3和Vue路由器4，

history:createWebHashHistory（）

是一个不错的选择。