使用Vitawind（vite 架構）多個app要如何正確build出對應的html 頁面

對新手來說一個網站除非他是一頁式網站，否則裡面會有很多頁面，如果每個頁面都是一個app，那我們要如何調整我們的vite 環境才能正常build出全部的頁面，這就是新手安裝完環境後，下一個可能會遇到的問題。環境安裝好我們就會在根目錄看到index.html，然後也可以在src資料夾裡找到main.js這個檔案，而index.html裡面會有一個#app區塊好對應app.vue這個檔案 。也就是說一個頁面要組成的檔案至少有一個html、一個main.js與一個vue檔，這就是一個基本的檔案結構，html檔是做好處理的，index.html在那裡，你的html檔就在哪裡。vue檔我覺得也可以比較單純一點統一放在src的components裡，而最麻煩的就是mian.js，為什麼？因為一個頁面要對應一個main.js，所以你會有很多個main.js，那是要怎麼放呢？我們只要做一些資料夾結構的調整，然後設定一下vite.config.js即可， 不用安裝其他插件，不需要設定其他東西，我們只要使用vite就可以做到了，絕對比你想的還簡單！

Step1 調整資料夾結構讓每一頁都有main.js可以用

在src資料夾裡新增pages資料夾，接著以每一個html名稱為主在pages裡在開新資料夾，例如我們第一頁教index.html，第二頁叫app.html，那你的資料結構就會像以下這樣

project
|-- src
|   |-- components
|   |   |-- Index.vue
|   |   |-- App.vue
|   |-- pages
|       |-- index
|       |   |-- main.js
|       |-- app
|           |-- main.js
|-- index.html
|-- app.html
|-- vite.config.js
|-- package.json

Step2 設定vite.config.js

打開vite.config.js，然後針對build做輸出設定，

import { defineConfig } from "vite";
import { resolve } from "path";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: "./",
  build: {
    outDir: "dist",
    rollupOptions: {
      input: {
        index: resolve(__dirname, "index.html"),
        utm: resolve(__dirname, "utm.html"),
      },
    },
  },
});

首先你需要導入 node.js裡面的 path模組中的resolve變數，這個變數可以幫助我們自動組合出絕對路徑（完整路徑），然後 __dirname 是node.js裡的全域變數，代表當前模組名稱，簡單來說resolve(__dirname, “index.html”) 可以幫我們產生出/Users/user/project/public/index.html (這是macOS 路徑，windows就會是 C:\Users\user\project\public\index.html )。

以上就是多個app的處理方式，所以你就可以直接index.html 與app 兩個頁面互連了，有沒有很簡單好懂呢？