我正在使用Vue.js开发渐进式Web应用程序。
在开发过程中,我使用命令
我注意到dev和prod版本之间的应用程序外观(css)有所不同。起初,我认为这可能是由于客户端缓存引起的,但经过多次尝试清除缓存和不缓存加载后,我确定缓存并不是问题所在。输出确实是不同的。
老实说,除了一些小的CSS部分之外,我不确定是否还有其他不同之处。我在思考可能的问题时,注意到了一些可能成为问题原因的事情,其中一个是我在vue中使用具有作用域的css的单文件组件(
需要注意的是,当涉及到npm、webpack和所有其他相关技术时,我是个新手。如果您想查看配置,可以在此处找到我的当前工作分支构建配置here。
您有什么想法吗?
在开发过程中,我使用命令
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。
您有什么想法吗?
<template>
一个ID并在scss中包含它来解决了它. 另外,我还将!important
应用于需要覆盖的通用样式。这可能不是最干净的解决方案,但目前可以解决问题。 - Thomas van Broekhoven