對新手來說一個網站除非他是一頁式網站,否則裡面會有很多頁面,如果每個頁面都是一個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 兩個頁面互連了,有沒有很簡單好懂呢?