vue css样式需要刷新才能加载出来

html-css043

vue css样式需要刷新才能加载出来,第1张

最近发现一个比较奇怪的问题,就是在开发vue中,路由点击跳转到另外一个组件中,样式是不出来的,然后刷新当前页面css样式才加载出来,找了好久才发现这个bug。

进入以后样式是这样的:css样式根本没有加载,这是为什么?

刷新了页面以后才可以出来,本身样式也是这样的:

找了半天原因,一点一点测试才发现

原来渲染的组件的父盒子的class='item'居然影响了css样式的内容,很奇怪,把class='item'修改成比如:class='abc'就可以了。

原文地址和更多信息:

https://www.3mooc.com/front/articleinfo/465

基于vue-cli3的项目,改造成SSR。

服务端渲染会提取组件的样式内联到html中,与link标签中的重复,使得页面体积变大,导致响应时间很慢。

原因是ssr会自动进行资源注入 Manual Asset Injection ,包含css、js等。

我们需要的是没有<style>标签的页面

所以通过配置参数,关闭资源注入。

接下来需要把css、js等文件再关联到输出的html中

当创建bundlerender的时候,我们可以使用一个模板,在这个模板里面预置页面所需要的各种资源。

思来想去,csr(客户端渲染)模式下生成的index.html再合适不过了。

而且,当build csr时,我们也可以预置一个模板,在这里添加上第三方的资源

最后是在模板中添加锚点

到这里基本大功告成

贴一下vue.config.js和build script(windows 平台)