关于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了 亲测有效噢~

2、上传至服务器路径没问题了,但是我们发现css样式错乱了
解决思路 长得不一样 是样式问题,是打包的时候顺序先后问题,有一些样式没有生效,有一些样式被覆盖了。这时候可以考虑以下几种方法。

 ①、main.js样式引入顺序问题

  有时候我们发现组件内的样式没有生效,可能是被第三方组件样式覆盖了,router放在最后引入,就可以实现组件样式在第三方样式之后渲染。

  ②、使用范围样式<style scoped>

    <style scoped>是H5的新特性,它限制样式只适用于当前组件,避免组件间的样式干扰。

好啦今天的的分享就到这里啦~~~  希望能对大家漫长的前端之路提供一点点帮助  如果有什么疑问呢,可以联系我qq:2407488005

猜你喜欢

转载自www.cnblogs.com/10ve/p/11354162.html