vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import vueJsx from '@vitejs/plugin-vue-jsx';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx({
      transformOn: true,
      mergeProps: true,
    }),
  ],
  base: './', // 開發或生產環境服務的公共基礎路徑 ,https://vitejs.bootcss.com/guide/build.html#public-base-path
  build: {
    outDir: 'dist', // 打包后的文件名稱,
    terserOptions: {
      // 生產環境下移除console
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 別名路徑
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: `@import "./src/assets/variables.scss";`, // 配置全局 scss
      },
    },
  },
  server: {
    https: false, // 是否開啟https
    open: true, // 是否自動打開瀏覽器
    port: 3000, // 端口號
    host: true, // 指定服務器應該監聽哪個 IP 地址。 如果將此設置為 0.0.0.0 或者 true 將監聽所有地址，包括局域網和公網地址。
    proxy: {
      '/api': {
        target: '', // 后台接口,
        changeOrigin: true,
        secure: false, // 如果是 https 接口需要配置這個參數
        // ws:false,//websocket
        rewrite: (path) => path.replace(/^\/api/, ''), // 路徑重寫
      },
    },
  },
});