vue-cli打包之后页面为空的问题。
做了一个demo,想看一下打包之后的样子,发现页面是空的。
发现问题就要解决:
1.首先看控制台没有报任何错误,那就证明我们的代码是没有任何问题的。
只能是路径问题造成的。
2.在路由router/index.js中加入一个404页面,代码引入创建之类的就不说了。也就是说只要路径错误,Error这个vue组件就会显示
{
      path: '*',
      name: '404',
      component: Error,
      hidden: true
    }
3.再打包,发现新增的Error果然出现。
4.再次证明是路径问题,想到路由有个mode模式
之前考虑到原先的默认模式(也就是地址后面带"#")很不习惯,所以改为history模式了
export default new Router({
  mode:'history',
  routes: [
    {
。。。
5.看下是不是这个问题
把history模式去掉
再打包
OK,一切正常
补充一下:
看一下config/index.js 里面

把绝对路径改为相对路径!!!!!
vue-cli打包之后页面为空的问题。的更多相关文章
- Vue Cli 打包之后静态资源路径不对的解决方法
		cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } ... 
- vue cli 打包项目造成css背景图路径错误
		vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ... 
- vue项目打包之后页面空白解决办法
		之前项目遇到个情况,npm run build打包之后上传到服务器后,index.html打开一片空白,资源都加载了,但是就是不显示. 然后百度找了原因,修改了两处地方 一.修改 assetsPubl ... 
- axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器
		1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ... 
- Vue打包后页面出现cannot get
		学习Vue有大半个月了,然而遇到了不少坑,完全没有高手们那么容易,中间有不少值得记录下的东东,回头好好理理.先理下今天的: Vue打包命令简单啊,直接在命令行输入:npm run build 然而没一 ... 
- VUE cli 4.x下配置多页面以及同时配置支持element-ui及mint-ui并且优化首页文件大小。
		场景,公司的一个小型项目,需同时支持移动端和PC端.最开始考虑做两个独立的项目.但后来考虑到总共只有4个功能页面,布署起来相对麻烦.所以决定做在一个项目里. 1.升级vue-cli到4.x npm i ... 
- vue cli 3 打包过大问题
		vue cli 3 打包命令 npm run build,这种情况下的打包可以通过设置 vue.config.js里面的 productionSourceMap: false. 如果是自己设置的打包环 ... 
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
		1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ... 
- Vue build打包之后,刷新页面出现404解决方案
		Vue build打包之后,刷新页面出现404,HTML5 History 模式 原因分析: vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于 ... 
随机推荐
- nodejs fs路径
			引用:https://www.cnblogs.com/guangzhou11/p/7705257.html require()别的js文件的时候,将执行那个js文件. 注意: require()中的路 ... 
- 2019 ACM-ICPC全国邀请赛(西安) M.Travel 二分+判联通
			https://nanti.jisuanke.com/t/39280 讲道理这题写bfs求最大边权限制下从1到n的最短步数,然后二分判一下就行了. 然鹅我还是直接套了dij,一开始纠结dij能不能过, ... 
- java--creater in windows
			电脑右键--高级--属性--更改环境变量 1.JAVA_HOME C:\Program Files\Java\jdk1.7.0_04 2. Path %JAV ... 
- HTML5实现获取地理位置信息并定位功能
			HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用.本文结合实例给大家分享如何使用HTML5,借助百度.谷歌地 ... 
- bootmem API总结
			bootmem_init()函数执行完成后,linux启动初期的bootmem分配器就初始化完成了,可以调用bootmem提供的API分配内存. 这些API在include/linux/bootmem ... 
- (WPF&Silverlight)silverlight自定义控件
			2个半小时弄懂了自定义控件是怎么回事儿. 在silverlight中创建一个UserControl,把上面sliderbar的外观和功能都封装在里面. 以自定义控件mapslider控件为例: 1.首 ... 
- Android stadio 电脑连上手机可以识别,但是连不上Android stadio
			原来是因为电脑没有装Android 手机驱动,我电脑刚装了系统. 很多驱动没有装.我有一个联想驱动管理,提示我装Android手机驱动.装完之后,就可以识别到手机了. 如果你的手机在电脑不识别,那么装 ... 
- WebApi 跨域
			http://www.cnblogs.com/lori/p/3557111.html http://bbs.csdn.net/topics/391020576 
- ogre3D学习基础3 -- 粒子与表层脚本
			9.粒子脚本 粒子脚本允许你实例化地在你的脚本代码中定义粒子系统,而不必在源代码中进行设置,使得你做任何修改都能得到快速回应.脚本里定义的粒子系统被用作模板,并且多个实际的系统可以在运行时从这里被创建 ... 
- log4j2异步日志配置及官方文档的问题澄清
			配置及demo 方法一全部打开 加启动参数 -DLog4jContextSelector=org.apache.logging.log4j.core.async.AsyncLoggerContextS ... 
