/*
 * @Author: shawnXiao
 * @Date: 2021-12-23 11:32:36
 * @LastEditTime: 2022-01-05 11:53:40
 * @FilePath: /vite2-vue3-typescript/vite.config.ts
 */
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import ViteComponents from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import styleImport from 'vite-plugin-style-import' // 组件样式按需加载配置
import vueJsx from '@vitejs/plugin-vue-jsx'
import viteCompression from 'vite-plugin-compression'
import VitePluginLegacy from '@vitejs/plugin-legacy'
import { viteMockServe } from 'vite-plugin-mock'
import externalGlobals from 'rollup-plugin-external-globals'
import viteSvgIcons from 'vite-plugin-svg-icons'
import { VitePWA } from 'vite-plugin-pwa'
import VitePluginHtml from 'vite-plugin-html'
import path from 'path'
import cdn from './cdn'
const envResolve = (mode: any, env: any) => loadEnv(mode, process.cwd())[env]

const BASE_URL = './'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  // 部署应用包时的基本 URL
  base: BASE_URL,
  root: process.cwd(),
  // 作为静态资源服务的文件夹
  publicDir: 'public',
  plugins: [
    // vite 支持 vue 单页面
    vue(),
    // 支持 tsx
    vueJsx(),
    // ant-design-vue 按需导入
    ViteComponents({
      resolvers: [
        AntDesignVueResolver({
          importStyle: 'less',
        }),
      ],
    }),
    styleImport({
      // 组件样式按需加载配置
      libs: [
        {
          libraryName: 'ant-design-vue',
          esModule: true,
          resolveStyle: (name) => `ant-design-vue/es/${name}/style/index`,
        },
      ],
    }),
    // mock模拟数据,vite中需要安装 vite-plugin-mock 插件。
    viteMockServe({ supportTs: true, mockPath: 'src/mock' }),
    // gzip压缩 生产环境生成 .gz 文件
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    }),
    VitePluginLegacy({
      targets: ['> 1%', 'last 2 versions'],
    }),
    /**
     *  把src/icons 下的所有svg 自动加载到body下，供组件使用
     *  类似于webpack中的svg-sprite-loader
     *  文档：https://github.com/anncwb/vite-plugin-svg-icons
     */
    viteSvgIcons({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // 指定symbolId格式
      symbolId: 'icon-[name]',
    }),
    VitePWA({
      manifest: {},
      workbox: {
        skipWaiting: true,
        clientsClaim: true,
      },
    }),
    /**
     *  注入环境变量到html模板中
     *  如在  .env文件中有环境变量  VITE_APP_TITLE=admin
     *  则在 html模板中  可以这样获取  <%- VITE_APP_TITLE %>
     *  文档：  https://github.com/anncwb/vite-plugin-html
     */
    VitePluginHtml({
      inject: {
        injectData: {
          title: 'vite with vue3',
          // cdn 配置
          cdn:
            envResolve(mode, 'VITE_NODE_ENV') === 'production'
              ? {
                  ...cdn,
                }
              : { css: [], js: [] },
          BASE_URL: BASE_URL,
        },
      },
      minify: true,
    }),
  ],
  css: {
    modules: {
      localsConvention: 'camelCase', // 默认只支持驼峰，修改为同时支持横线和驼峰
    },
    preprocessorOptions: {
      less: {
        // 自定义主题变量
        // "@primary-color": "#0083FF",
        // 支持less,开启less Js运行时
        javascriptEnabled: true,
      },
    },
  },
  // 配置别名
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '#': path.resolve(process.cwd(), './types'),
      '/imgs': 'src/assets/imgs',
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
  },
  // 生产环境打包配置
  build: {
    target: 'es2015',
    minify: 'terser', // 是否进行压缩,boolean | 'terser' | 'esbuild',默认使用terser
    manifest: false, // 是否产出maifest.json
    sourcemap: false, // 是否产出soucemap.json
    outDir: 'dist', // 产出目录
    terserOptions: {
      //去除 console debugger
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    brotliSize: false, // 取消计算文件大小，加快打包速度
    assetsDir: 'static/img/',
    rollupOptions: {
      // 拆分打包
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
      },
      external: [
        'vue',
        'vue-router',
        'vuex',
        'ant-design-vue',
        'vue-i18n',
        'nprogress',
        'axios',
        'moment',
      ],
      plugins: [
        externalGlobals({
          vue: 'Vue',
          'vue-router': 'VueRouter',
          vuex: 'Vuex',
          'vue-i18n': 'VueI18n',
          'ant-design-vue': 'antd',
          nprogress: 'NProgress',
          axios: 'axios',
          moment: 'moment',
        }),
      ],
    },
  },
  //启动服务配置
  server: {
    host: '0.0.0.0',
    port: 5000, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    https: false,
    cors: true, // 允许跨域
    // 代理
    proxy: {
      '/api': {
        target: 'http://API网关所在域名',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace('/api/', '/'),
      },
    },
    // before(app:any) {
    //   app.get('/mock/*', (req, res) => {
    //     const url = req.url.indexOf('?') > -1 ? req.url.split('?')[0] : req.url
    //     const func = require(path.resolve(`./src/${url}`))
    //     res.json(func(req, res))
    //   })
    // },
  },
}))