2023 年 7 月 21 日

使用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 兩個頁面互連了,有沒有很簡單好懂呢?

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

相關推薦文章

希望您會喜歡
2016 年 10 月 12 日
[教學] Vue js快速上手 (六) 一定要懂for loop

在寫教學的過程中很囧的一件事就是,教學還沒寫完新版本就誕生了,這就是我中途又去忙了一個多月之後,回來發現的第一 […]

Read More
2006 年 9 月 21 日
[桌布]捐血

  有的人,你這一輩子一直遇到他,但是感情卻比水還淡。有的人,你這一輩子都遇不到他,但是感情卻比血還濃。

Read More
2022 年 1 月 1 日
使用Vitawind安裝Vite+Tailwindcss+Pug+LESS 開發環境建置

前言 最近的新專案想導入Tailwindcss,主要是希望在團隊合作上可以有個前端共用的framework,降 […]

Read More
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram