vue history模式下出现空白页情况
2024-10-02 05:56:23
项目场景
vue搭建的项目,路由一直用的hash模式,所以url中都会带有一个“#”号。
现在想要去掉“#”,于是使用history模式 { mode: 'history' },代码如下:
现在想要去掉“#”,于是使用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/”。
其次,这个文件夹是服务器放项目的文件夹,不是你本地项目的文件夹位置!!
最新文章
- SQL Tuning 基础概述06 - 表的关联方式:Nested Loops Join,Merge Sort Join &; Hash Join
- [Cache] C#操作缓存--CacheHelper缓存帮助类 [复制链接]
- Asp.Net - 7.AJAX
- js响应HTML客户端下拉列表的修改事件
- git版本库底层命令
- OD调试1--第一个win32程序
- Tomcat+redis+nginx配置
- Python3基础 pop() 删除 键为指定值的项
- 破解&;屏蔽防止嵌入框架代码 top.location != self.location
- Java 英语
- Linux环境下安装禅道
- ArrayBuffer和TypedArray,以及Blob的使用
- SeaJS之shim插件:解决非cmd规范的插件与sea的区别
- /var/spool/clientmqueue目录下存在大量文件的原因及解决方法
- centos6.8 安装jenkins
- http网站上传文件大小问题【没测试过】
- Intellij IDEA 热部署处理
- Qt中Pro文件变量详细说明
- VC++ 窗口拆分CSplitterWnd
- 获取浏览器版本型号(C#)