<p>csp全称 ：Content-Security-Policy 是浏览器一种安全策略</p><p>html设置csp:style-src 'self' 表示 样式策略只信任自身服务器的源样式文件，并且<strong>不执行内联样式 。</strong>从而导致界面错乱</p><p><img src="/api/file/view?id=7298990811767635968"></p><p>解决办法：控制台已经告诉你解决办法了</p><p>1.设置为 'unsafe-inline' 表示信任不安全的内联样式</p><p>2.设置为 'nonce-random123' 表示指定一个nonce值在 style标签上，例如 &lt;style nonce="random123"&gt;&lt;/style&gt; 这个style里面的样式能正常加载</p><p>3.设置为 hash值，这个要把style文件计算为hash值，每次修改style都要重新计算hash，不推荐</p><p><br></p><p>但是，在正式打包之后，发现 &lt;div style="position: absolute;"&gt;&lt;/div&gt; 这种内联样式是可以正常运行的，只需要指定 &lt;style nonce="random123"&gt;&lt;/style&gt; 的nonce值。</p><p>另外，js中如果执行dom修改操作，并且其中写了内联样式，则执行报错，样式不会加载。解决办法是用class去指定样式</p>