I am newbie to VueJS and using VueJS 3 to build a basic portfolio website with backend as GoLang and VueJS as frontend. I am facing issue where local build when we run server saying “npm run serve” looks different and when we build production code which creates dist folder and to run it say “npm serve -s dist” and that gives a different look to website. How to avoid that and make local and production build look same. By looks I mean CSS doesn’t load up properly.

My folder structure :

project_root
├── Dockerfile.backend
├── Dockerfile.frontend
├── README.md
├── backend
│   ├── config
│   ├── db
│   ├── handlers
│   ├── main.go
│   └── models
├── docker-compose.yaml
├── frontend
│   ├── README.md
│   ├── babel.config.js
│   ├── dist
│   ├── jsconfig.json
│   ├── nginx.conf
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   ├── src
│   ├── vite.config.js
│   └── vue.config.js
├── go.mod
├── go.sum
└── webapp.db

vue.config.js

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        '__VUE_OPTIONS_API__': JSON.stringify(true),
        '__VUE_PROD_DEVTOOLS__': JSON.stringify(false),
        '__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': JSON.stringify(false) // Define the feature flag here
      })
    ]
  },
  publicPath: './',
};

vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  define: {
    '__VUE_OPTIONS_API__': true,
    '__VUE_PROD_DEVTOOLS__': false,
    '__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': false // Define the feature flag here
  }
});

Attaching screenshots of the website

Local Development Served

Dist Build Production

I used vite.config.js which was not present earlier in my codebase, but that too did not help. I observed that my main.css hasnt loaded in dist build folder.