vite多頁面設定專案實戰

2022-04-08 13:00:36

目錄結構

{
    dist: // 存放打包後的檔案,
    node_modules: ,
    src: {
        assets: // 一些靜態檔案,
        components: // 公用元件,
        index: { // 頁面1
            index.html,
            main.js,
            App.vue,
            ...
        },
        page: { // 頁面2
            index.html,
            main.js,
            App.vue,
            ...
        },
        ...
        index.html // 用於頁面初始進入時重定向
    },
    package.json: ,
    vite.config.js: // 組態檔
}

Tips：在src中放一個index.html是為了編譯或打包後，輸入localhost:3000/能夠直接跳轉到需要展示的頁面，而不是出現檔案目錄或空白頁面，對應程式碼為：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vite多頁面</title>
</head>
<body>
<script>
  window.location.href = 'index/index.html' // 需要重定向的頁面
</script>
</body>
</html>

多頁面使用時，vite設定項中注意點

修改root引數為多頁面的根目錄：./src/，根據不同目錄結構而修改
設定base引數為/，不然打包後js檔案的存取路徑會出問題
將build.outDir原輸入路徑dist改為../dist，根據root引數設定層級不同而對應修改
rollupOptions.input中設定多個頁面的輸入，以下為我使用的設定項

{
    admin: path.resolve(__dirname, 'src/index.html'), // 用於頁面重定向
    index: path.resolve(__dirname, 'src/index/index.html'), // 頁面一
    page: path.resolve(__dirname, 'src/page/index.html'), // 頁面二
}

vite.config.js 設定，僅供參考

直接上我的設定，東西有點多，僅供參考

import {
  defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
  // 服務
  server: {
    // 伺服器主機名
    host: '0.0.0.0',
    // 埠號
    port: 3000,
    // 設為 true 時若埠已被佔用則會直接退出，
    // 而不是嘗試下移一格埠
    strictPort: false,
    // http.createServer() 設定項
    // https: '',
    proxy: {
      '/api': {
        target: 'http://...............',
        changeOrigin: true,
        rewrite: (path) => {
          return path.replace(/^/api/, '')
        }
      }
    },

    // 開發伺服器設定 CORS
    // boolean | CorsOptions
    cors: {},
    // 設定為 true 強制使依賴構建
    // force: true,
    // 禁用或設定HMR連線
    hmr: {},
    // 傳遞給 chokidar 的檔案系統監視器選項
    watch: {}
  },

  // 專案根目錄
  // root: process.cwd(),
  root: './src/',
  // 專案部署的基礎路徑
  base: '/',
  // 環境設定
  mode: 'development',
  // 全域性變數替換 Record<string, string>
  define: {},
  // 外掛
  plugins: [vue()],
  // 靜態資源服務資料夾
  publicDir: 'public',

  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'components': path.resolve(__dirname, 'src/components')
    },
    dedupe: [],
    // 情景匯出package.json 設定中的 exports 欄位
    conditions: [],
    // 解析package.json 中的欄位
    mainFields: ['module', 'jsnext:main', 'jsnext'],
    // 匯入時想要省略的擴充套件名列表
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  },

  css: {
    // 設定css modules 的行為， 選項被傳遞給postcss-modules
    modules: {},
    // PostCSS 設定（格式同postcss.config.js）
    // postcss-load-config 的外掛設定
    postcss: {},
    // 指定傳遞給 CSS 前處理器的選項
    preprocessorOptions: {
    }
  },

  json: {
    // 是否支援從 .json 檔案中進行按名匯入
    namedExports: true,
    // 若設定為 true, 匯入的 JSON 會被轉換為 export default JSON.parse("...") 會比轉譯成物件字面量效能更好
    // 尤其是當 JSON 檔案較大時
    // 開啟此項， 則會禁用按名匯入
    stringify: false
  },

  // 繼承自 esbuild 轉換選項， 最常見的用例是自定義 JSX
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
    jsxInject: `import React from 'react'`
  },

  // 靜態資源處理   字串 || 正規表示式
  assetsInclude: '',
  // 調整控制檯輸出的級別 'info' | 'warn' | 'error' | 'silent'
  logLevel: 'info',
  // 設為 false 可以避免 Vite 清屏而錯過在終端中列印某些關鍵資訊
  clearScreen: true,

  build: {
    // 瀏覽器相容性 ‘esnext' | 'modules'
    target: 'modules',
    //輸出路徑
    outDir: '../dist',
    // 生成靜態資源的存放路徑
    assetsDir: '../assets',
    // 小於此閾值的匯入或參照資源將內聯為 base64 編碼， 以避免額外的http請求， 設定為 0, 可以完全禁用此項，
    assetsInlineLimit: 4096,
    // 啟動 / 禁用 CSS 程式碼拆分
    cssCodeSplit: true,
    // 構建後是否生成 soutrce map 檔案
    sourcemap: false,
    // 自定義底層的 Rollup 打包設定
    rollupOptions: {
      input: {
        admin: path.resolve(__dirname, 'src/index.html'),
        page: path.resolve(__dirname, 'src/page/index.html'),
        index: path.resolve(__dirname, 'src/index/index.html'),
      },
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
      }
    },

    // @rollup/plugin-commonjs 外掛的選項
    commonjsOptions: {},

    // 構建的庫
    // lib: { entry: string, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string },

    // 當設定為 true, 構建後將會生成 manifest.json 檔案
    manifest: false,

    // 設定為 false 可以禁用最小化混淆
    // 或是用來指定是應用哪種混淆器
    // boolean | 'terser' | 'esbuild'
    minify: 'terser',

    // 傳遞給 Terser 的更多 minify 選項
    terserOptions: {},

    // 設定為false 來禁用將構建好的檔案寫入磁碟
    write: true,

    // 預設情況下 若 outDir 在 root 目錄下， 則 Vite 會在構建時清空該目錄。
    emptyOutDir: true,

    // 啟用 / 禁用 brotli 壓縮大小報告
    brotliSize: false,

    // chunk 大小警告的限制
    chunkSizeWarningLimit: 500
  }
})

存取

頁面一：http://localhost:3000/index/index.html

頁面二：http://localhost:3000/page/index.html

總結

到此這篇關於vite多頁面設定的文章就介紹到這了,更多相關vite多頁面設定內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

vite多頁面設定專案實戰

目錄

目錄結構

多頁面使用時，vite設定項中注意點

vite.config.js 設定，僅供參考

存取

總結

熱門文章