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/>'
- });
- mode: 'history'，使用这个模式，在开发阶段一切都是正常的，访问地址是localhost:8888，以上没什么错误，一切都好用。url里也没有#了。可是打包之后，访问项目会发现页面一片空白的情况。不是404，不报错，只是空白！！
- 很多项目都放在了服务器根目录下面，访问后的url就是：http://123.com，这是一种解决办法
- 假如我的项目没有放在服务器根目录下，放在了服务器的nice/app下，那么打开地址是：http://123.com/nice/app
那么这里问题就来了，我们配的路由中并没有nice/app，所以无法找到路径中的组件，所以也就无法渲染了。这就是导致空白的原因!
此时只需要修改router中的index.js，给路由中加一个base的属性，值为 ‘/nice/app/’就可以了。代码：
- const router = new VueRouter({
- mode: 'history',
- base: '/nice/app/',
- routes: routers
- });
记住这个base，base值两边一定要有"/"，不要写成“nice/app”、“/nice/app”或者“nice/app/”。
其次，这个文件夹是服务器放项目的文件夹，不是你本地项目的文件夹位置！！
经验首页