vite.config.js 4.9 KB
/*
 * @Date: 2025-10-30 10:27:43
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-11-04 14:37:28
 * @FilePath: /stdj_h5/vite.config.js
 * @Description: 文件描述
 */
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import postcsspxtoviewport from 'postcss-px-to-viewport'
import { createProxy } from './build/proxy'
import { createHtmlPlugin } from 'vite-plugin-html';

export default ({ command, mode }) => {
  const root = process.cwd();

  const viteEnv = loadEnv(mode, root);
  // let isProd = (command === 'serve'); // 情景配置是否为开发模式 serve 或 build

  return defineConfig({
    base: viteEnv.VITE_BASE, // 开发或生产环境服务的公共基础路径。
    plugins: [
      vue(),
      AutoImport({
        imports: ['vue', 'vue-router'],
        dts: 'src/auto-imports.d.ts',
        eslintrc: {
          enabled: true
        }
      }),
      Components({
        resolvers: [VantResolver()],
        dts: 'src/components.d.ts'
      }),
      createHtmlPlugin({
        // 生产环境下的HTML压缩配置
        minify: {
          // 核心:删除HTML中的注释
          removeComments: true,
          // 可选:其他压缩选项(按需开启)
          collapseWhitespace: true, // 折叠空白字符
          removeRedundantAttributes: true, // 移除冗余属性(如input的type="text")
          removeScriptTypeAttributes: true, // 移除script标签的type="text/javascript"
          removeStyleLinkTypeAttributes: true, // 移除style/link标签的type="text/css"
          minifyCSS: true, // 压缩内嵌CSS
          minifyJS: true, // 压缩内嵌JS
        },
      }),
    ],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
        '@components': path.resolve(__dirname, 'src/components'),
        '@utils': path.resolve(__dirname, 'src/utils'),
        '@api': path.resolve(__dirname, 'src/api'),
        '@assets': path.resolve(__dirname, 'src/assets'),
        '@views': path.resolve(__dirname, 'src/views'),
        '@stores': path.resolve(__dirname, 'src/stores')
      }
    },
    css: {
      postcss: {
        plugins: [
          tailwindcss,
          autoprefixer,
          postcsspxtoviewport({
            unitToConvert: 'px',
            viewportWidth: 375,
            unitPrecision: 6,
            propList: ['*'],
            viewportUnit: 'vw',
            fontViewportUnit: 'vw',
            selectorBlackList: ['ignore-'],
            minPixelValue: 1,
            mediaQuery: true,
            replace: true,
            exclude: [],
            landscape: false
          })
        ]
      }
    },
    server: {
      host: '0.0.0.0',
      port: viteEnv.VITE_PORT, // 本地服务端口
      // strictPort: true, // 设为true时若端口已被占用则会直接退出, 而不是尝试下一个可用端口
      // https: '',
      // open: false, // 在服务器启动时自动在浏览器中打开应用程序. 当此值为字符串时, 会被当作URL的路径名.
      // proxy: { // 代理
      //   '/srv/': {
      //     // target: 'http://voice.onwall.cn',
      //     target: viteEnv.VITE_PROXY_TARGET,
      //     changeOrigin: true,
      //     // rewrite: (path) => path.replace(/^\/api/, '')
      //   },
      // },
      proxy: createProxy(viteEnv.VITE_PROXY_PREFIX, viteEnv.VITE_PROXY_TARGET),
      // cors: '', // 为开发服务器配置 CORS。默认启用并允许任何源,传递一个 选项对象 来调整行为或设为 false 表示禁用。
      // force: '', // 设置为 true 强制使依赖预构建。
      // hmr: '', // 禁用或配置 HMR 连接(用于 HMR websocket 必须使用不同的 http 服务器地址的情况)。 设置 server.hmr.overlay 为 false 可以禁用服务器错误遮罩层。
      // watch: '', // 传递给 chokidar 的文件系统监视器选项。
    },
    build: {
      // outDir: 'voice', // 指定输出路径(相对于项目根目录).
      outDir: viteEnv.VITE_OUTDIR, // 指定输出路径(相对于项目根目录).
      assetsDir: 'static',
      rollupOptions: {
        output: {
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
          preserveComments: false // 确保 Rollup 层面也不保留
        },
        input: { // 多页面应用模式, 打包时配置,运行配置要处理root
          main: path.resolve(__dirname, 'index.html'),
          // mono1: path.resolve(__dirname, 'src/packages/mono1/index.html'),
          // mono2: path.resolve(__dirname, 'src/packages/mono2/index.html'),
        }
      },
    },
  });
};