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

發佈留言

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

相關推薦文章

希望您會喜歡
2008 年 7 月 3 日
[網頁]2008年美容醫學生技保健大展

負責內容:設計+活動執行 2008年台北國際美容醫學生技保健大展折價券版型 http://www.mycoup […]

Read More
2008 年 6 月 29 日
[表情]網路快速傳播現象之藍藍路之謎

"藍藍路!藍藍路!大家一起把手舉起來~藍藍路!"這是我朋友的弟弟跟我朋友說的一句話,過沒多久,我的msn就衝刺 […]

Read More
2010 年 1 月 9 日
[免費]Alchemist 等多款免費App 遊戲下載

Alchemist (遊戲推薦下載) 這是一款記憶消除遊戲,你必須按照遊戲上方的顏色提示從下方彩色化學罐中找出 […]

Read More
Copyright © 2024 草監網路 . All rights reserved.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram