vue.js - 缩小的 css 无法在 Azure 静态站点上正确呈现答案

【问题标题】：vue.js - minified css not rendering properly on Azure static sitevue.js - 缩小的 css 无法在 Azure 静态站点上正确呈现
【发布时间】：2018-10-01 15:28:40
【问题描述】：

我已将静态 vue.js 网站部署到 Azure：https://surgedemo.z16.web.core.windows.net/

开发版本在 OS X 上的 Chrome 和 Safari 中呈现良好，当我从 dist 目录提供生产版本时，生产版本也是如此。

但是，CSS 似乎不是从网站呈现的。我已经上传了正确的 mime 类型的文件。

奇怪的是，当我使用 Chrome 开发者工具来美化静态网站的 CSS 时，它呈现的很好。

有什么想法吗？

谢谢！

【问题讨论】：

标签： javascript css azure vue.js

【解决方案1】：

看起来 mimetype 设置不正确：

$ curl https://surgedemo.z16.web.core.windows.net/css/app.dc7c3871.css -v 2>&1 | grep Content-Type
< Content-Type: text/plain

在 azure 上查看此内容。从其他用户体验来看，可能存在一些可能的故障点，请查看以下提示：

好的，知道了。不得不清除我的 Cdn 端点。它已经缓存了我的文件当它的 MIME 类型设置为“application/octeet-stream”时。基本上需要将其设置为“text/css”然后清除端点所以它从存储帐户获取新版本。

来源：https://social.msdn.microsoft.com/Forums/azure/en-US/a65eee29-e021-4d4d-9feb-490f5c89b7ea/troubles-with-azure-cdn-and-css-files?forum=azurecdn

【讨论】：

太好了，谢谢！我在上传到 Azure 时使用 libmagic 进行 mime 检测，并且（我现在意识到）它弄错了 js 和 css。