关于cli打包至服务器出现的BUG(样式错乱,路径出错)解决方案
很久没来博客园了,今天给大家带来两个硬货bug,前端大牛可能不觉得是啥,但是对于没碰到过这问题的小菜鸟我来说还是很不错的
1、npm run build 至服务端的时候出现路径报错解决方案
①、本地测试无任何问题打包上线,全报错,出bug
解决思路:在src文件夹同级目录下创建vue.config.js文件里面
在vue.config.js中重写打包后的基础路径为当前目录
②、重新打包之后上传服务器,发现访问是不会报错了,但是请求的资源(如index.html、index.css、xxx.js)这些又报304、404、401问题,整个页面是一个白屏,没有任何自己的开发的东西
解决思路:查看各种资料后得出结论,应该是路由的加载模式的问题,因为vue-router的模式不同,导致服务器不能够识别,解决方案就是在 router.js 中 更改路由器的访问模式。
我们可以看到router.js里面的mode 为 history
只用将mode的”history“改为”hash“就OK了 重新npm run build 上传至服务器就OK了 亲测有效噢~
①、main.js样式引入顺序问题
有时候我们发现组件内的样式没有生效,可能是被第三方组件样式覆盖了,router放在最后引入,就可以实现组件样式在第三方样式之后渲染。
②、使用范围样式<style scoped>
<style scoped>是H5的新特性,它限制样式只适用于当前组件,避免组件间的样式干扰。
好啦今天的的分享就到这里啦~~~ 希望能对大家漫长的前端之路提供一点点帮助 如果有什么疑问呢,可以联系我qq:2407488005
关于cli打包至服务器出现的BUG(样式错乱,路径出错)解决方案的更多相关文章
- vue项目打包后路径出错
安装完vue后搭建了一个项目,直接执行 npm run dev 是可以正常打开页面的: 但是执行 npm run build 打包项目后打开却报错了,如下: 原来是项目中的静态文件路径报错了... 然 ...
- 使用C#动态生成Word文档/Excel文档的程序测试通过后,部署到IIS服务器上,不能正常使用的问题解决方案
使用C#动态生成Word文档/Excel文档的程序功能调试.测试通过后,部署到服务器上,不能正常使用的问题解决方案: 原因: 可能asp.net程序或iis访问excel组件时权限不够(Ps:Syst ...
- js进阶ajax的XMLHttpRequest对象的status和statustext属性(如果ajax和php联合使用的话:open连接服务器的第二个参数文件路径改成请求php的url即可)
js进阶ajax的XMLHttpRequest对象的status和statustext属性(如果ajax和php联合使用的话:open连接服务器的第二个参数文件路径改成请求php的url即可) 一.总 ...
- vue webpack打包后.css文件里面的背景图片路径错误解决方法
资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
- 问题笔记-vueCli3.0打包路径出错
需求:vueCli3.0打包路径出错.解决办法:vueCli3.0打包,新版本更新脚手架做出精简,webpack配置文件需要手动配置.在文件根目录创建一个vue.config.js配置文件.基本版: ...
- 转 基于Quick-cocos2dx 2.2.3 的动态更新实现完整篇。(打包,服务器接口,模块自更新
1,如何设计更新服务器接口. 2,不改变原框架的代码的情况下如何实现更新,并且可以实现精确的进度. 3,如何按照版本打包. 4,如何跨n个小版本更新. 5,版本回滚. 6,如何更新你的自动更新模块和f ...
- Jenkins结合shell脚本实现(gitLab/gitHub)前端项目自动打包部署服务器
原始发布部署: 石器时代的我们,先是本地打包好项目,在去服务器上把原来的文件删了,然后回到本地copy到服务器: 这操看起来简单,实际部署的人就知道多烦了,假如来几个项目都要重新发布:那就爽了: 今天 ...
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
- Vue Cli 打包之后静态资源路径不对的解决方法
cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } ...
随机推荐
- MySQL 给已存在的数据表 增加字段和注释
MySQL 给已存在的数据表 增加字段和注释 问题描述 在开发一个系统的过程中,经常会遇到随着系统服务功能的扩展,或者服务之间的关联,需要适当的修改原有的表结构,比如,增加一些必要的字段. 示例:在已 ...
- [笔记] Ubuntu机器添加新硬盘安装流程
SSD虽然快,但是容量不够用,买了块希捷4TB的机械硬盘,准备给台机扩容. 安装环境 OS: Ubuntu 18.04 安装新硬盘 问了客服,原来这款机箱已经带了硬盘滑槽,不需要固定螺钉了. 买了SA ...
- django在style的样式image url添加静态图片路径和django如何动态传入图片链接?
#django在style的样式image url添加静态图片路径 style=" background:url({% static "agribusiness/images/lo ...
- npm scripts
参考资料1:[https://docs.npmjs.com/misc/scripts] 参考资料2:[http://www.ruanyifeng.com/blog/2016/10/npm_script ...
- 华为HCNA乱学Round 7:VLAN间路由
- 【Python开发】Url中文字符时记得转码edcode("utf-8")
在url中使用中文其实是一个坏习惯,会带来一系列的转码问题, 我更喜欢英文译名或者id来标识某个uri.但是现实往往是残酷的, 特别是在我们调用别人服务时候,有时候被逼无奈使用中文URL. Pytho ...
- linux中su和sudo区别
su切换用户,切换成root用户,要输入root用户的密码 su - 用户名 sudo 涉及到 /etc/sudoers文件 ,内容如下: # User privilege specificatio ...
- 【转帖】msvcp100.dll和msvcr100.dll
VS发布软件时去除msvcp100.dll和msvcr100.dll图解说明 https://blog.csdn.net/yu__jia/article/details/82753262 msvcp. ...
- 单页面应用 之 项目中集成插件vue-router
\es6\my-complex-project>npm install vue-router -S (S 表示这个包下载到,当前的项目中) 导入写好的 router 这里尽量使用 @ ...
- bfs(太空电梯)
http://oj.jxust.edu.cn/contest/problem?id=1563&pid=4 题目描述 公元9012年,Q博士发明了一部太空电梯,与一般电梯不同,太空电梯不能直接到 ...