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

發佈留言

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

相關推薦文章

希望您會喜歡
2010 年 10 月 29 日
[UI]這才叫分享照片!!好圖就該po上minus

秉持著有圖有真相與科技的進步,拍照已經變成日常生活常做的動作,回想幾年前拍照還需要準備相機準備USB線與記憶卡 […]

Read More
2013 年 11 月 17 日
網站設計評論#10:Forefathers Group with RWD

關於網站 Forefathers Group是一間擁有網站、品牌、開發等相關服務的團體(或工作室?),整體網站 […]

Read More
2009 年 9 月 25 日
[活動]Lifewin 開源結流搶錢PK大賽

負責內容:企劃+設計  Lifewin 開源結流搶錢PK大賽 主視覺設計與網頁切板及banner製作

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