巧用Vite配置多入口构建多页面应用，助你轻松打造现代前端项目

2023-09-01 07:53:01

前言

欢迎来到Vue3+Vite+TS+Eslint（Airbnb规则）搭建生产项目系列终章！在前几章中，我们已经了解了如何使用这些工具搭建一个基本的Vue项目。在本章中，我们将继续深入探讨如何在项目中配置多入口和多页面应用，帮助你打造更复杂的前端项目。

什么是多入口和多页面应用？

在开发现代前端项目时，我们经常会遇到需要同时处理多个页面或模块的情况。例如，一个电商网站可能需要一个主页、产品页、购物车页和结账页。为了满足这种需求，我们可以使用多入口和多页面应用技术。

多入口是指将项目的代码分为多个独立的入口文件，每个入口文件对应一个特定的页面或模块。多页面应用则是在多入口的基础上，将不同的页面或模块组合成一个完整的应用程序。

如何在Vite中配置多入口和多页面应用？

在Vite中配置多入口和多页面应用非常简单，只需要在项目的配置文件中进行一些修改即可。首先，我们需要在项目的根目录下创建多个入口文件，每个入口文件对应一个页面或模块。然后，我们在Vite的配置文件中配置这些入口文件，并指定相应的输出路径。

// vite.config.js
export default {
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        page1: resolve(__dirname, 'page1/index.html'),
        page2: resolve(__dirname, 'page2/index.html'),
      },
      output: {
        dir: resolve(__dirname, 'dist'),
        entryFileNames: '[name].js',
        chunkFileNames: '[name].[hash].js',
        assetFileNames: '[name].[hash].[ext]',
      },
    },
  },
};

在上面的配置中，我们创建了三个入口文件：index.html、page1/index.html和page2/index.html。我们还指定了相应的输出路径，以便Vite在构建项目时将这些入口文件编译成JavaScript代码并输出到指定的目录中。

在多入口和多页面应用中使用TypeScript和Eslint

在多入口和多页面应用中使用TypeScript和Eslint与在普通项目中使用它们没有太大区别。我们只需要在项目的配置文件中配置相应的工具即可。

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2015",
    "module": "esnext",
    "jsx": "react",
    "strict": true,
  },
  "include": [
    "./src/**/*.ts",
    "./src/**/*.tsx",
  ],
  "exclude": [
    "./node_modules",
  ],
}

// .eslintrc.js
module.exports = {
  "extends": [
    "eslint:recommended",
    "airbnb-typescript",
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json",
  },
  "rules": {
    // ...
  },
};

在上面的配置中，我们配置了TypeScript的编译器和Eslint的规则。我们还指定了需要编译的源文件和需要排除的文件。

踩坑记录

在配置多入口和多页面应用时，我们也遇到了一些问题。以下是一些常见的踩坑点：

入口文件路径错误： 在Vite的配置文件中，我们需要正确指定入口文件的路径。否则，Vite将无法找到这些入口文件，导致项目构建失败。
输出路径错误： 在Vite的配置文件中，我们需要正确指定输出路径。否则，Vite将无法将构建后的代码输出到指定目录中。
TypeScript和Eslint的配置错误： 在TypeScript和Eslint的配置文件中，我们需要正确配置相应的选项。否则，这些工具将无法正常工作。