返回

Vite + Vue3 + TypeScript 构建项目，避免 index.html 页面出现空白、跨域、资源丢失、404 错误

前端

问题

在使用 Vue3 + TypeScript 进行项目开发时，通过 Vite 进行构建打包后，直接在本地以文件系统的方式，用浏览器直接打开打包生成后的 dist 目录下的 index.html 文件访问时，浏览器页面可能出现以下问题：

  • 空白页面： 打开 index.html 文件后，浏览器页面没有任何内容显示，一片空白。
  • 跨域错误： 访问页面时，出现跨域错误，提示请求被阻止或拒绝。
  • 资源丢失： 页面上引用的一些资源，如 CSS、JavaScript、图片等，无法正常加载，导致页面显示不完整或错乱。
  • 404 错误： 访问页面时，出现 404 错误，提示页面不存在或已被删除。

解决方案

针对上述问题，有以下解决方案：

1. 配置 Vite 服务

在项目的 vite.config.js 文件中，对 Vite 服务进行适当的配置，以确保构建出的 index.html 文件能够正确加载资源并显示页面内容。

// vite.config.js
module.exports = {
  // 设置服务端口号
  server: {
    port: 3000,
  },
  // 设置构建目标环境，这里设置为开发环境
  build: {
    target: 'esnext',
  },
  // 设置跨域代理
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ''),
    },
  },
};

2. 确保资源路径正确

在 index.html 文件中，确保引用的资源路径是正确的。例如，CSS 文件的路径应指向 dist/assets/style.css，JavaScript 文件的路径应指向 dist/assets/script.js。

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
    <link href="dist/assets/style.css" rel="stylesheet" />
  </head>
  <body>
    <div id="app"></div>
    <script src="dist/assets/script.js"></script>
  </body>
</html>

3. 设置正确的基准路径

在 Vue3 项目中，需要在根实例中设置正确的 base 选项，以确保路由和资源路径能够正确解析。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app', {
  base: '/dist/',
});

4. 处理跨域问题

如果项目涉及到跨域请求，则需要在 Vite 服务中配置跨域代理，以便浏览器能够正常发送跨域请求。

// vite.config.js
module.exports = {
  // ...
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ''),
    },
  },
};

总结

通过以上解决方案，可以解决 Vite + Vue3 + TypeScript 项目打包构建后出现 index.html 页面空白、跨域、资源丢失、404 错误等问题，确保项目能够正常运行和访问。