Vue3 多页面实现

// vite.config.ts
import { UserConfig, defineConfig } from "vite";
import { resolve } from "path";
import vue from "@vitejs/plugin-vue";
import { getInput } from "./build/rollup-options";

// https://vitejs.dev/config/
export default defineConfig((): UserConfig => {
  // 项目根目录（index.html 文件所在的位置）变更
  const rootPage = resolve(__dirname, "./src/pages/");
  // 打包后文件指定输出路径（相对于 项目根目录)变更
  const outDirDist = resolve(__dirname, "./dist");
  const input = getInput();
  return {
    root: rootPage,
    // 变更 .env 文件的目录
    envDir: resolve(__dirname, "./env"),
    plugins: [vue()],
    build: {
      outDir: outDirDist, // 输出路径
      assetsDir: "static", // 静态文件目录
      // 默认情况下 若 outDir 在 root 目录下， 则 Vite 会在构建时清空该目录。
      emptyOutDir: true,
      rollupOptions: {
        input,
        output: {
          // 更改静态文件 目录+文件名
          chunkFileNames: "static/js/[name]-[hash].js",
          entryFileNames: "static/js/[name]-[hash].js",
          assetFileNames: "static/[ext]/[name]-[hash].[ext]",
        },
      },
    },
    // 打包移除log、debug
    esbuild: {
      drop:
        process.env.NODE_ENV === "development" ? [] : ["console", "debugger"],
    },
    server: {
      host: "0.0.0.0",
      port: 8080,
      // 项目启动后，自动打开
      open: true,
      proxy: {
        "/api": {
          target: "http://127.0.0.1",
          changeOrigin: true,
          rewrite: (path: any) => path.replace(/^\/api/, ""),
        },
      },
    },
  };
});

import fs from "fs";
import { resolve, join, extname } from "path";

// 获取项目根目录
const ROOT_PATH = resolve(__dirname, "..");
// 获取项目页面文件夹
const PAGE_PATH = join(ROOT_PATH, "/src/pages");

type FileInfo = {
  fullPath: string,
  fileInfo: fs.Stats,
  file: string,
};

const readDirectory = (
  filePath: string,
  excludeFiles: string[] = []
): FileInfo[] => {
  const files: FileInfo[] = [];
  try {
    const items = fs.readdirSync(filePath);
    for (const item of items) {
      if (!excludeFiles.includes(item)) {
        const fullPath = resolve(filePath, item);
        const fileInfo = fs.statSync(fullPath);
        files.push({ fullPath, fileInfo, file: item });
      }
    }
  } catch (error) {
    console.error(`读取目录出错: ${filePath}`, error);
  }
  return files;
};

interface inputInfo {
  [key: string]: string;
}

const getInput = (): inputInfo => {
  const input: inputInfo = {
    index: resolve(PAGE_PATH, "index.html"),
  };

  const files = readDirectory(PAGE_PATH);

  for (const { fullPath, fileInfo, file } of files) {
    if (fileInfo.isDirectory()) {
      const innerFiles = readDirectory(fullPath);
      const htmlFile = innerFiles.find(({ file }) => extname(file) === ".html");
      if (htmlFile) {
        input[file] = htmlFile.fullPath;
      }
    }
  }

  // 子页面打包时，获取子页面的页面 name，该 name 需要与实际子页面文件夹 name 一致，如无子页面单独打包需求可以去除该代码，保留也无影响
  const pageIndex = process.argv.findIndex((item) => item === "--page");
  if (pageIndex !== -1) {
    const pageName = process.argv[pageIndex + 1] || undefined;
    if (pageName && input[pageName]) {
      return {
        [pageName]: input[pageName],
      };
    }
  }
  return input;
};

export { getInput };

export default defineConfig({
  resolve: {
    // 配置下文件系统路径的别名，如果使用了ts 还需要进行 tsconfig.json 文件的配置
    alias: {
      "@": `${resolve(__dirname, "src")}`,
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/variables.scss" as *;`,
      },
    },
  },
});

import { createApp } from "vue";
import App from "./App.vue";
import pinia from "@/stores";

const app = createApp(App);
app.use(pinia);