Vite 上的 Vue 3 应用：部署后白屏且 MIME 类型错误

问题描述 投票：0回答：1

我在 Vue 3 中有一个使用 Vite（Dreamhost 托管）的应用程序。我进行了所需的更改并运行了 npm run build 命令，并将所有文件从 dist 文件夹移动到我的托管站点文件夹，但出现白屏和错误“无法加载模块脚本：需要 JavaScript 模块脚本”但服务器响应的 MIME 类型为“text/html”，根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。 我上次提交的构建也不起作用，但这是不可能的。还好我有备份。请帮忙，我已经尝试了所有方法。

本地使用 npm run Preview 则不存在此问题。也许问题直接出在托管服务器的设置上？

我可以发送文件来帮助找出问题所在

我尝试在清除浏览器缓存后打开该网站。在“网络”选项卡中，所有站点文件都出现了。我尝试了 vite build --base=./ 和 vite build --base=/ 我正在比较备份的 index.html 文件和新版本

托管网站上的文件夹结构：
mysite.com/
索引.html
资产
.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

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

# 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.
<IfModule mod_rewrite.c>
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]
</IfModule>

# END WordPress

建立index.html

<!doctype html>
<html lang="ru">
  <head>
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="anonymous">
    <link rel="preload" as="style" onload="this.rel='stylesheet'" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap">
    <link rel="preload" as="font" type="font/ttf" href="/assets/Neucha-Regular-6b04fa67.ttf" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/ttf" href="/assets/Montserrat-Regular-c3fb0280.ttf" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/eot" href="/assets/materialdesignicons-webfont-861aea05.eot" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="/assets/materialdesignicons-webfont-e52d60f6.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff" href="/assets/materialdesignicons-webfont-48d3eec6.woff" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/ttf" href="/assets/materialdesignicons-webfont-bd725a7a.ttf" crossorigin="anonymous">

    <link rel="icon" type="image/png" href="https://www.halyapina.com/favicon.png">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Мария Халяпина, дизайнер мебели. [email protected] tg @halyapina322">
    <title></title>
    <script type="module" crossorigin src="/assets/index-4342591b.js"></script>
    <link rel="stylesheet" href="/assets/index-3405360e.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>
vue.js deployment vite
1个回答
0
投票

我不知道怎么办，但我解决了。不知何故，并非所有上传到托管和托管文件夹 mysite.com 的文件都没有显示有关它的通知。当我尝试将 .htaccess 更改为

# Устанавливаем правильные MIME-типы для JavaScript и CSS
AddType application/javascript .js
AddType text/css .css

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /

  # Не перенаправляем запросы на существующие файлы и директории
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d

  # Не перенаправляем запросы на статические ресурсы (JS, CSS, изображения и т.д.)
  RewriteCond %{REQUEST_URI} !\.(js|css|png|jpg|jpeg|gif|svg|ico|webp|woff|woff2|ttf|otf)$ [NC]

  # Все остальные запросы перенаправляем на index.html
  RewriteRule . /index.html [L]
</IfModule>

我开始在控制台中收到错误，无法找到一些文件，我再次上传它们（通过解压 zip），它帮助了我。

结论。问题是缺少一些文件，并且我没有收到有关它的消息，在更改 .htaccess 后，我得到了真正的错误并解决了我的问题。 我希望它会对某人有益。再见。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.