Vue 3 Application on Vite: White Screen and MIME Type Error After Deployment

Question

I have an application in Vue 3 that uses Vite (Dreamhost hosting). I made the changes I need and ran the npm run build command, and moved all the files from the dist folder to my hosted site folder, but I get a white screen and the error "Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec". The build from my last commit doesn't work either, but that's not possible. Good thing I had a backup. Help please, I've tried literally everything.

Locally with npm run preview there is no such problem. Maybe the problem is directly with the settings of the hosting server?

I can send files that can help figure out what's wrong

I tried opening the site after clearing the browser cache. In the Network tab, all the site files come. I tried vite build --base=./ and vite build --base=/ I was comparing the index.html file of the backup and the new build

folders structure on hosting website:
mysite.com/
index.html
assets
.htaccess

package.json

{
  "name": "vuetify-project",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "@mdi/font": "7.0.96",
    "@splidejs/splide-extension-auto-scroll": "^0.5.3",
    "@splidejs/vue-splide": "^0.6.12",
    "core-js": "^3.29.0",
    "roboto-fontface": "*",
    "swiper": "^11.0.5",
    "v-lazy-image": "^2.1.1",
    "vue": "^3.2.0",
    "vue-i18n": "^9.9.0",
    "vue-router": "^4.0.0",
    "vuetify": "^3.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "eslint": "^8.37.0",
    "eslint-plugin-vue": "^9.3.0",
    "sass": "^1.60.0",
    "unplugin-fonts": "^1.0.3",
    "vite": "^4.2.0",
    "vite-plugin-vuetify": "^1.0.0"
  }
}

vite.config.js

// Plugins
import vue from '@vitejs/plugin-vue'
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
import ViteFonts from 'unplugin-fonts/vite'

// Utilities
import { defineConfig } from 'vite'
// import { fileURLToPath, URL } from 'node:url'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: { transformAssetUrls }
    }),
    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
    vuetify({
      autoImport: true,
      styles: {
        configFile: 'src/styles/settings.scss',
      },
    }),
    ViteFonts({
      google: {
        families: [{
          name: 'Roboto',
          styles: 'wght@100;300;400;500;700;900',
        }],
      },
    }),
  ],
  define: { 'process.env': {} },
  resolve: {
    alias: {
      // '@': fileURLToPath(new URL('./src', import.meta.url))
      '@': '/src',
    },
    extensions: [
      '.js',
      '.json',
      '.jsx',
      '.mjs',
      '.ts',
      '.tsx',
      '.vue',
    ],
  },
  server: {
    port: 3000,
  },
})

route.js

import { createRouter, createWebHistory } from 'vue-router';

import Aboutme from '@/pages/About.vue';

const routes = [
  {
    path: '/',
    component: () => import('@/pages/Home.vue'),
  },
  {
    path: '/aboutme',
    component: Aboutme,
  },
  {
    path: '/anima',
    component: () => import('@/pages/Anima.vue'),
  },
  // Другие маршруты вашего приложения
  {
    path: '/:pathMatch(.*)*',
    redirect: () => import('@/pages/Home.vue'),
  },
  //Пути проектов
  {
    path: '/crownbed',
    component: () => import('@/pages/projects/CrownBed.vue'),
  },
  {
    path: '/spacejam',
    component: () => import('@/pages/projects/SpaceJam.vue'),
  },
  {
    path: '/fennel',
    component: () => import('@/pages/projects/Fennel.vue'),
  },
  {
    path: '/alien',
    component: () => import('@/pages/projects/Alien.vue'),
  },
  {
    path: '/ufo',
    component: () => import('@/pages/projects/Ufo.vue'),
  },
  {
    path: '/bubble',
    component: () => import('@/pages/projects/Bubble.vue'),
  },
  {
    path: '/dragonfly',
    component: () => import('@/pages/projects/Dragonfly.vue'),
  },
  {
    path: '/firefly',
    component: () => import('@/pages/projects/Firefly.vue'),
  },
  {
    path: '/duo',
    component: () => import('@/pages/projects/Duo.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

import i18n from '../i18n'

router.beforeEach((to, from, next) => {
  let title = "";
  if (to.path === '/') {
    title = i18n.global.messages[i18n.global.locale].header.home;
  } else {
    let lastPathPart = to.path.substring(1);
    if (lastPathPart in i18n.global.messages[i18n.global.locale].header) {
      title = i18n.global.messages[i18n.global.locale].header[lastPathPart];
    } else if (lastPathPart in i18n.global.messages[i18n.global.locale].projects) {
      title = i18n.global.messages[i18n.global.locale].projects[lastPathPart];
    }
  }

  document.title = `${title} | ${i18n.global.messages[i18n.global.locale].surname}`;
  next();
});

export default router;

.htaccess


  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]


# BEGIN WPSuperCache
# The directives (lines) between "BEGIN WPSuperCache" and "END WPSuperCache" are
# dynamically generated, and should only be modified via WordPress filters.
# Any changes to the directives between these markers will be overwritten.
# END WPSuperCache

# BEGIN WordPress
# The directives (lines) between "BEGIN WordPress" and "END WordPress" are
# dynamically generated, and should only be modified via WordPress filters.
# Any changes to the directives between these markers will be overwritten.

RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]


# END WordPress

builded index.html

Vue 3 Application on Vite: White Screen and MIME Type Error After Deployment

Answers (1)

Related Questions