如何通过 cdn 正确包含 vue-router 以使历史模式工作？答案

【问题标题】：How to correctly include vue-router via cdn to make history mode working?如何通过 cdn 正确包含 vue-router 以使历史模式工作？
【发布时间】：2021-06-27 08:07:33
【问题描述】：

我在 html 文档中包含这样的脚本：

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

在 main.js 中，当我写 mode: 'history' 时，什么都没有出现：

const routes = [
  {path: '/', name: 'blank', component: BlankPage},
  {path: '/directory1', name: 'directory1', component: Directory1},
  {path: '/directory2', name: 'directory2', component: Directory2},
  {path: '/directory3', name: 'directory3', component: Directory3},
]

const router = new VueRouter({
  routes,
  mode: 'history'
})

const app = new Vue({
  router,
}).$mount('#app')

当我删除mode:'history' 时出现网页。遇到这种情况该如何处理？

【问题讨论】：

mode: 'history' 用于从 URL 中删除 '#'。
问题是我写这个模式的时候什么都看不到。屏幕上什么都没有。只是白色的视口。
你能在这里创建一个代码sn-p吗
您是否缺少router-view？
不，它在 html 本身中，除非建立模式历史记录，否则它可以工作。

标签： javascript html vue.js scripting cdn

【解决方案1】：

历史模式需要一些服务器，例如开发服务器。所以我在 gulp 的帮助下创建了一个简单的开发服务器。 gulpfile.js：

var gulp = require('gulp'),
  connect = require('gulp-connect');
 
gulp.task('webserver', function() {
  connect.server({
    fallback: 'table.html'
  });
});
 
gulp.task('default', gulp.series('webserver'));

现在历史模式有效。如果有人知道为什么会这样，请告诉我！

【讨论】：