'npm run dev' 和 'npm run build prod' 产生的输出不相同。

Question

我正在使用Vue.js开发渐进式Web应用程序。

在开发过程中，我使用命令npm run dev启动本地服务器，该服务器将文件提供在http://localhost:8080/上。当我想要构建生产时，我使用npm run build prod，它会在project\dist中生成输出文件。然后，我将这些文件复制到一个已配置为与单页应用程序配合使用的ISS上。到目前为止一切正常。

我注意到dev和prod版本之间的应用程序外观（css）有所不同。起初，我认为这可能是由于客户端缓存引起的，但经过多次尝试清除缓存和不缓存加载后，我确定缓存并不是问题所在。输出确实是不同的。

老实说，除了一些小的CSS部分之外，我不确定是否还有其他不同之处。我在思考可能的问题时，注意到了一些可能成为问题原因的事情，其中一个是我在vue中使用具有作用域的css的单文件组件（*.scoped.vue.css文件名）。我猜可能会有将不同文件组合成一个文件的问题？

需要注意的是，当涉及到npm、webpack和所有其他相关技术时，我是个新手。如果您想查看配置，可以在此处找到我的当前工作分支构建配置here。

您有什么想法吗？

- товіаѕ

---

你找到这个问题的解决方案了吗？我目前也遇到了同样的问题。 - Thomas van Broekhoven

很遗憾，@ThomasvanBroekhoven不行。 - товіаѕ

@TobiasWürth 好的，谢谢。我通过给<template>一个ID并在scss中包含它来解决了它. 另外，我还将!important应用于需要覆盖的通用样式。这可能不是最干净的解决方案，但目前可以解决问题。 - Thomas van Broekhoven

Answer 1

在运行npm run build时，样式应用的顺序很重要，而且据我所知是不受我们控制的。为了消除冲突，在使用Vue.js时，您可能希望对样式进行scope。

在项目中的每个*.vue文件中，替换

<style>
...
</style>

使用

<style scoped>
...
</style> 

- Vojtěch Pithart

---

样式已经被作用域限定，文件名以 *.scoped.vue.css 结尾。 - товіаѕ

Answer 2

当我使用单文件组件时，遇到了同样的问题。问题似乎是当你运行npm run build时，它会生成一个单一的CSS文件，不能保证样式将以相同的顺序应用，导致某些属性值被忽略。我通过在最终构建中未匹配的属性上添加!important来“修复”它。可能有更好的处理方法，但我必须承认我也是一个新手。

- maxdel