vue项目打包之后页面空白解决办法

之前项目遇到个情况,npm run build打包之后上传到服务器后,index.html打开一片空白,资源都加载了,但是就是不显示。

然后百度找了原因,修改了两处地方

一、修改 assetsPublicPath

在config/index.js里面,有个 assetsPublicPath 属性,源码是‘/’,修改成‘./’,加个点

assetsPublicPath: ‘/‘,
二、路由模式将histroy改成hash模式,起初 mode:‘history‘

const router = new Router({
base: ‘/‘,
mode: ‘hash‘,
routes: ROUTES
})
那么vue-router的hash模式和histroy模式有什么区别呢?

1、hash模式url带#,histroy模式url不带#

2、hash模式解决了通过http请求来切换页面,改变路径可以直接改变页面,无需进行网络请求,这叫前端路由,在hash模式下改变的是#中的信息,

history模式,可以前进和后退,但是不能刷新页面,刷新之后就会报错。如果后端没有对路由地址进行相应的处理,那么就会报404的错。

3、hash浏览器支持率比较好,支持低版本的浏览器,但history的方法只支持部分浏览器。

原文地址:https://www.cnblogs.com/wang715100018066/p/9952353.html

时间: 2024-08-28 23:39:07

vue项目打包之后页面空白解决办法的相关文章

vue项目打包部署-----解决打包后访问资源失败问题

vue项目打包部署-----解决打包后访问资源失败问题. 本文链接:https://blog.csdn.net/kaola_l/article/details/80497490 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了解决js找

使用HBuilderX将vue项目打包成app

因为项目要用到手机扫一扫的功能,纯H5的话我百度之后只能做到调用摄像头,拍照后识别二维码,无法做到自动识别 看到H5+有扫码功能,所以今天尝试用HBuilderX将vue项目打包成app 总的流程很简单,这真的要感谢H5中国产业联盟做出的贡献.将vue打包,生成dist文件夹,HBuilderX创建H5+App项目,这里选择的是默认模版,然后将dist里的文件夹覆盖到新项目,就可以云打包成app下载到手机或者直接进行真机调试 生成app后遇到的第一个坑就是白屏,原因是页面找不到 为了解决跨域问题

vue项目打包踩坑记

基于webpack+vue-cli下的vue项目打包命令是 npm run build ,等待打包完成后在根目录生成dist文件夹,里面包含了所有项目相关的内容. 注意:需要完整版的vue-cli项目,即通过vue init webpack初始化的项目才可以,通过vue init webpack-simple初始化的项目没有打包文件,无法打包.目录结构如下 vue init webpack初始化的目录结构,打包依赖build和config文件夹的配置,static存放静态文件 vue init

Sitemesh排除Exclude不装饰特定页面的解决办法

有时候项目中有些文件不需要Sitemesh装饰,例如Error.htm, Error.jsp, OnlineHelp.htm等等.但是用Sitemesh的Exclude不管用,用Printable也不管用: 因为Sitemesh装饰的排除路径是虚拟路径而非实际路径.Sitemesh是根据URL来进行装饰Decoration的.最后的解决办法是:如果我们不想让Sitemesh对OnlineHelp.htm进行装饰,那就在这个文件的头加上这个: 然后在decorators.xml里面配置一下: 最后

vue项目打包部署生产环境

vue项目打包部署生产环境 打包部署生产环境之前需要修改配置文件: 修改一:build > utils.js  (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 修改二:config > index.js (修改assetsPublicPath:'./' ,修改目的是为了解决js找不到的问题) 两个文件修改完成之后,运行命令:npm run build 打包直接访问dist文件夹中的index.html即可. 原文地址:https:

Java项目打包工具安装失败解决方法

在学习Java的时候我们打包项目但遇到如下情况:(提示没有找到java的运行环境!) 网上目前有两中的解决方案: (1)选择本地jdk环境; (2)下载Download 但是第一种选择本地老是失败(方法:点Locate找到你机器上已安装的JDK目录下/bin/java.exe就可以进行安装了) 目前我还没有解决的(如果成功的话,算你走运) 然后使用第一种但是下载的时候也是不能下载,解决方法.,换一个软件在重试,下载地址:http://www.pc6.com/softview/SoftView_6

OD 内存映射 属主找不到当前程序名解决办法 和 跟随ClassProc 反汇编窗口空白解决办法

OD 内存映射 属主找不到当前程序名解决办法 取消 StrongOD 选项里  高级枚举模块选项就OK了  重启OD 跟随ClassProc  反汇编窗口空白解决办法 StrongOD.dll 是有问题的.网上百度鱼C工作室 用他的StrongOD.dll可以解决这个问题 复制下面的错误图片连接 其实就是好的StrongOD的下载链接 下载下来把jpg改成dll就可以了

Vue项目打包后背景图片路径错误

vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', 修改为: env

一个菜鸟把Vue项目打包为APP的道路

1.先下载HBuilder X,推荐,上面有APP云打包 2.在写好的Vue项目打包配置如图(仅供参考,具体看自己配置) 3.HBuilder X 软件打开,新建如图 4.建好后,吧Vue打包文件放在此处覆盖原有的文件 5.之后配置 6.app云打包,发布,下载在手机上看适配情况 原文地址:https://www.cnblogs.com/wqxh/p/12160748.html