Vue 在 history 模式下，部署到服务器出现空白页情况

项目场景：

vue 搭建的项目，路由一直用的hash模式，所以url中都会带有一个#号。现在想要去掉#，于是使用history模式{ mode: ‘history’ }，代码如下：

import Vue from 'vue';
import App from './App';
import routers from './router';
import VueRouter from 'vue-router';
 
Vue.use(VueRouter);
 
const router = new VueRouter({
  mode: 'history',
  routes: routers
});
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
});
12345678910111213141516171819

问题：页面空白

mode: ‘history’，使用这个模式，在开发阶段一切都是正常的，访问地址是 localhost:8888，以上没什么错误，一切都好用。url 里也没有#了。可是打包之后，访问项目会发现页面一片空白的情况。不是404，不报错，只是空白！！

解决办法：

很多项目都放在了服务器根目录下面，访问后的 url 就是：http://123.com，这是一种解决办法
假如我的项目没有放在服务器根目录下，放在了服务器的ele下，那么打开地址是：http://123.com/ele
那么这里问题就来了，我们配的路由中并没有ele，所以无法找到路径中的组件，所以也就无法渲染了。这就是导致空白的原因！

此时只需要修改router中的 index.js，给路由中加一个 base 的属性，值为 ‘/ele/’就可以了。代码：

const router = new VueRouter({
  mode: 'history',
  base: '/ele/',
  routes: routers
});
12345

注意：

记住这个base，base值两边一定要有/，不要写成ele、/ele或者ele/。其次，这个文件夹是服务器放项目的文件夹，不是你本地项目的文件夹位置！！