vue-cli项目打包出现空白页和路径错误问题
vue-cli项目打包:
1. 命令行输入:npm run build
打包出来后项目中就会多了一个文件夹dist,这就是我们打包过后的项目。
第一个问题,文件引用路径。我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题。
解决:到config文件夹中打开index.js文件。
文件里面有两个assetsPublicPath属性,更改第一个,也就是更改build里面的assetsPublicPath属性:
assetsPublicPath属性作用是指定编译发布的根目录,‘/’指的是项目的根目录 ,’./’指的是当前目录。
改好之后重新打包项目,运行index.html文件,我们可以看到没有报错了。但是router-view里面的内容却出不来了。
第二个问题:router-view中的内容显示不出来。路由history模式。
这个坑是当你使用了路由之后,在没有后端配合的情况下就手贱打开路由history模式的时候,打包出来的文件也会是一片空白的情况,
很多人踩这个坑的时候花了很多时间,网上的教程基本上都是说的第一个坑,这个坑很少有人提起。
解决:// mode: 'history',//将这个模式关闭就好
这里并不是说不能打开这个模式,这个模式需要后端设置的配合,详情可以看:路由文档
vue-cli项目打包出现空白页和路径错误问题的更多相关文章
- vue.js 打包时出现空白页和路径错误
vue-cli输入命令:npm run build 即可打包vue.js的项目 打包出来后项目中就会多了一个文件夹dist,下图为我们打包过后的项目 我们直接运行打包后的文件夹中的index.ht ...
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- vue打包空白及字体路径错误问题
vue项目打包后空白 在config/index.js文件中 assetsPublicPath: '/', 改为 assetsPublicPath: './', build: { // Templat ...
- vue cli 3 打包过大问题
vue cli 3 打包命令 npm run build,这种情况下的打包可以通过设置 vue.config.js里面的 productionSourceMap: false. 如果是自己设置的打包环 ...
- vue打包后空白页问题全记录 (background路径,css js404,jsonp等);
总结一下vue打包后问题全记录:大部分开发者webpack基本上都是拿来就用的(并没有系统化的研究). 一 >>> 打包之后的静态文件不能直接访问:(例如dist)打包后搭个服务器才 ...
- vue+webpack项目打包后背景图片加载不出来问题解决
在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...
- vue.js项目打包上线
最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架 ...
- vue之项目打包部署到服务器
这是今年的第一篇博客.整理一下vue如何从项目打包到部署服务器,给大家做下分享,希望能给大家带来或多或少的帮助,喜欢的大佬们可以给个小赞,如果有问题也可以一起讨论下. 第一步:这是很关键的一步.打开项 ...
- Vue Cli 3 打包上线 静态资源404问题解决方案
报错原因:静态资源丢失 解决方案 官方文档https://cli.vuejs.org/zh/config/#vue-config-js baseUrl 从 Vue CLI 3.3 起已弃用,请使用pu ...
随机推荐
- underscore.js 分析 第二天
Underscore源码中有这么句obj.length === +obj.length意思是typeof obj.length == number,即检测obj的长度是否是数字我的理解:这么写是来检测 ...
- DMA是什么意思
DMA是让硬盘不用通过CPU来控制读写 它的意思是直接存储器存取,是一种快速传送数据的机制,DMA技术的重要性在于,利用它进行数据存取时不需要CPU进行干预,可提高系统执行应用程序的效率.利用DMA传 ...
- 翻译:利用GDAL生成cogeoff文件
翻译自: Introducing the AWS Lambda Tiler https://hi.stamen.com/stamen-aws-lambda-tiler-blog-post-76fc11 ...
- 解决美图看看不出现在“Open with”的子菜单中的问题
最近由于特殊需求,要使用美图看看,Win10系统,美图看看工作倒也正常,但出现一个比较郁闷的情况,就是只能在“Open with”的最下面一个子菜单中选择“Choose another app”,然后 ...
- node-redis使用记录
redis的高速存取性能让人印象深刻,虽然是分布式存储,但相比本地内存,性能毫不逊色. 之所以能做到这点,是由于redis的“单线程,多路复用IO”,同一时刻只有一个操作在进行. 而且多次建立从red ...
- 「日常训练」Watering Flowers(Codeforces Round #340 Div.2 C)
题意与分析 (CodeForces 617C) 题意是这样的:一个花圃中有若干花和两个喷泉,你可以调节水的压力使得两个喷泉各自分别以\(r_1\)和\(r_2\)为最远距离向外喷水.你需要调整\(r_ ...
- Ping隧道
1.研究原因: 校园内网的探索,校内电子图书馆资源的利用,认证校园网 2.目的: 内网服务器:在一台因防火墙等原因仅限icmp数据通过的 公网服务器 : 建立icmp 隧道链接, 并在公网服务器上进 ...
- Python3开启Http服务
在CMD命令行输入D: 切换到D盘, 然后输入 python -m http.server 8000 开启HTTP服务: 在浏览器地址栏输入 http://localhost:8000/
- 第一阶段·Linux运维基础 第3章·文件属性、正则表达式、文件权限
01-文件属性内容介绍 02- inodeyublock讲解 03-访问oldboyfile的寻宝过程 04-inode与block小结 05-磁盘空间不足案例详解 06-Linux文件类型及拓展名 ...
- 学习用MaxScipt批处理Max文件
学习用MaxScipt批处理Max文件 需求 对几百个.max文件中的指定指定名称的骨骼进行重命名. 解决 考虑到是一次性需求,花了两个钟用maxscript实现了功能,基本逻辑把改名规则做成配置文本 ...