vite 简要配置

1 配置路径处理模块

安装ts的类型声明文件

pnpm i @types/node -D

通过配置alias来定义路径的别名

 resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },

2 分别打包css ,js，image

build: {
      rollupOptions: {
        output: {
          // chunk 文件名
          chunkFileNames: 'assets/js/[name].[hash].js',
          assetFileNames: chunkInfo => {
            // 处理图片
            let subDir = 'image';

            if (path.extname(chunkInfo.name) === '.css') {
              subDir = 'css';
            }
            return `assets/${subDir}/[name].[hash].[ext]`;
          },
          entryFileNames: 'assets/js/[name].[hash].js',
          sourcemap: false,
        },
      },
      assetsDir: 'assets',
      // ... 其他配置
    },

3 代理

server: {
      hmr: true, // 禁用或配置 HMR 连接 
      port: 1234, // 指定服务器端口
      open: true, // 在服务器启动时自动在浏览器中打开应用程序
      cors: true, // 为开发服务器配置 CORS,默认启用并允许任何源
      host: '0.0.0.0', // IP配置，支持从IP启动
      proxy: {
        [env.VITE_APP_BASE_API]: {
          target: env.VITE_BASE_URL,
          changeOrigin: true,
          rewrite: path => path.replace(new RegExp(`^${env.VITE_BASE_API}`), ''),
        },
      },
    },

.env文件

VITE_BASE_API=/api

env.development文件

VITE_BASE_URL = 'http://192.168.0.5'