Currently, I am in the process of developing a progressive web app using Vue.js.
During development, I utilize the command npm run dev to initiate the local server that serves the files over at http://localhost:8080/. When it comes time to build for production, I rely on npm run build prod, which produces the output files within the project\dist directory. From there, I transfer these files onto an ISS configuration designed for single-page applications. All seemed well and good up to this point.
Lately, however, I've noticed discrepancies in the appearance (specifically with the CSS) of the app between the development and production builds. Initially, I suspected it could be due to client-side caching. Yet even after multiple attempts at clearing the cache and trying no-cache loading, it has become apparent that caching is not the root cause of the issue. The differences are truly there.
Upon further reflection, apart from certain minor CSS elements, I am uncertain what other disparities exist between the two builds. As I ponder potential causes, one aspect that caught my attention was my use of single file components in Vue with scoped CSS (denoted by the *.scoped.vue.css file names). Could there possibly be an issue when consolidating these various files into a singular entity?
It's worth mentioning that I'm relatively new to npm, webpack, and the myriad of other technologies involved in this project. For those interested in examining my current branch's build configurations, feel free to check them out here.
Any insights or ideas as to what might be causing this discrepancy?