vite.config.ts基礎配置分享

更多配置參考：https://vitejs.dev

vite.config.ts

const fs = require("fs")
const path = require("path")

// Dotenv 是一個零依賴的模塊，它能將環境變量中的變量從 .env 文件加載到 process.env 中
const dotenv = require("dotenv")

const envFiles = [
  /** default file */ `.env`,
  /** mode file */ `.env.${process.env.NODE_ENV}`
]

for (const file of envFiles) {
  const envConfig = dotenv.parse(fs.readFileSync(file))
  for (const k in envConfig) {
    process.env[k] = envConfig[k]
  }
}

module.exports = {
  assetsDir: './',
  alias: {
    '/@/': path.resolve(__dirname, './src')
  },
  optimizeDeps: {
    include: ['echarts']
  },
  hostname: process.env.VITE_HOST,
  port: process.env.VITE_PORT,
  // 引用全局 scss
  cssPreprocessOptions: {
    scss: {
      additionalData: '@import "./src/assets/style/index.scss";'
    }
  },
  // 壓縮
  minify: 'esbuild',
  // 是否自動在瀏覽器打開
  open: false,
  // 是否開啟 https
  https: false,
  // 服務端渲染
  ssr: false,
  /**
   * Base public path when served in production.
   * @default '/'
   */
  base: process.env.VITE_BASE_URL,
  /**
   * Directory relative from `root` where build output will be placed. If the
   * directory exists, it will be removed before the build.
   * @default 'dist'
   */
  outDir: process.env.VITE_OUTPUT_DIR,
  // 反向代理
  proxy: {
    api: {
      target: "http://www.skillnull.com",
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, "")
    }
  }
}

　　

.env

# loaded in all cases
VITE_HOST = '0.0.0.0'
VITE_PORT = 8080
VITE_BASE_URL = './'
VITE_OUTPUT_DIR = 'dist'

　　

.env.development

# 開發環境
VITE_API_DOMAIN = '/api'

　　

.env.production

# 生產環境
VITE_API_DOMAIN = 'production.xxx.xxx'

　　

package.json

"scripts": {
  "dev": "NODE_ENV=development vite",
  "build-dev": "NODE_ENV=development vite build",
  "build-prd": "NODE_ENV=production vite build",
  "lint": "lint-staged ."
}