vue history模式下,部署到服务器 出现空白页情况-前端开发-Html5-我要学365体育投注人人小站_365体育投注打不开_皇冠365体育投注网址_我要学365体育投注人人小站_365体育投注打不开_皇冠365体育投注网址是一个面向开发者的知识分享网站 365体育投注人人小站_365体育投注打不开_皇冠365体育投注网址
我的位置:首页 > 前端开发>Html5

vue history模式下,部署到服务器 出现空白页情况

时间:2019-07-30 18:29:00 来源:互联网 作者: 神秘的大神 字体:

  •  问题描述:
   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: '' });
 
  •  mode: 'history',使用这个模式,在开发阶段一切都是正常的,访问地址是localhost:8888,以上没什么错误,一切都好用。url里也没有#了。可是打包之后,访问项目会发现页面一片空白的情况。不是404,不报错,只是空白!!
  • 解决办法如下:
  1. 很多项目都放在了服务器根目录下面,访问后的url就是:http://123.com,这是一种解决办法
  2. 假如我的项目没有放在服务器根目录下,放在了服务器的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/”。
     其次,这个文件夹是服务器放项目的文件夹,不是你本地项目的文件夹位置!!