vue3+vite5开发模式正常，打包部署后出现空白页，但没有报错

Question

开发模式所有加载正常显示，打包部署到服务器非根目录后子组件没有加载出来，出现空白页面，但是没有报错；

router路由配置：

import { createRouter, createWebHistory } from 'vue-router'
import login from '../components/login.vue';
var router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: login
    },
  ]
});
var load=0;
router.beforeEach((to,from,next)=>{
  next();
})
export default router

vite.config.js配置：

```javascript
import { fileURLToPath, URL } from 'node:url'
import { defineConfig,loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig(mode => {
  const env = loadEnv(mode.mode, process.cwd())
  return {
    // 获取项目根路径变量，其他变量类似
    base: './',
    plugins: [
      vue(),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    server:{
      host: '0.0.0.0',
      // 端口
      port: 8080,
      // 是否开启 https
      https: false,
      // 设置反向代理，跨域
      proxy: {
        '/api': {
          // 后台地址
          target: 'http://192.168.0.35',
          ws:true,
          changeOrigin: true,
          rewrite: path => path.replace(/^\/api/, '') // 重定向删除'/api'
        }
      }
    },
    build:{
      //指定输出路径
      outDir: "dist",
      //生成静态资源的存放路径
      assetsDir: "assets",
      //启用/禁用 CSS 代码拆分
      cssCodeSplit: true,
      //构建后是否生成 source map 文件
      sourcemap: false,
      //自定义底层的 Rollup 打包配置
      rollupOptions: {

      },
      //默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。
      emptyOutDir: true,
      assetsPublicPath: './',
    }
  }
})

```

Answer 1

该回答引用自GPT-3.5, 由博主 GISer Liu 编写：

问题分析

用户在使用 Vue 3 和 Vite 5 进行开发时，开发模式下一切正常，但在打包部署到服务器非根目录后，出现了空白页面，且没有报错信息。这个问题可能与路由配置、资源路径配置或构建配置有关。

解决方案

1. 检查路由配置

首先，确保路由配置正确。在 createWebHistory 中使用 import.meta.env.BASE_URL 可能会导致路径问题。建议显式设置 base 路径。

import { createRouter, createWebHistory } from 'vue-router'
import login from '../components/login.vue';

var router = createRouter({
  history: createWebHistory('/your-sub-directory/'), // 修改这里
  routes: [
    {
      path: '/',
      component: login
    },
  ]
});

var load = 0;
router.beforeEach((to, from, next) => {
  next();
})

export default router

2. 检查 vite.config.js 配置

确保 base 路径设置正确，并且 assetsPublicPath 也设置正确。

import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(mode => {
  const env = loadEnv(mode.mode, process.cwd())
  return {
    base: '/your-sub-directory/', // 修改这里
    plugins: [
      vue(),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    server: {
      host: '0.0.0.0',
      port: 8080,
      https: false,
      proxy: {
        '/api': {
          target: 'http://192.168.0.35',
          ws: true,
          changeOrigin: true,
          rewrite: path => path.replace(/^\/api/, '')
        }
      }
    },
    build: {
      outDir: "dist",
      assetsDir: "assets",
      cssCodeSplit: true,
      sourcemap: false,
      rollupOptions: {
      },
      emptyOutDir: true,
      assetsPublicPath: '/your-sub-directory/', // 修改这里
    }
  }
})

3. 检查服务器配置

确保服务器配置正确，特别是静态资源的路径。如果使用的是 Nginx，确保配置如下：

server {
  listen 80;
  server_name your-domain.com;

  location /your-sub-directory/ {
    alias /path/to/your/dist/;
    try_files $uri $uri/ /your-sub-directory/index.html;
  }
}

总结

通过以上步骤，可以解决 Vue 3 和 Vite 5 在打包部署到服务器非根目录后出现空白页的问题。主要涉及路由配置、Vite 配置和服务器配置的调整。确保所有路径正确，特别是 base 和 assetsPublicPath 的设置。

如果该回答解决了您的问题，请采纳！如果没有，请私信联系或评论您的疑惑