记录一下vue3的vite.config.js文件配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import {
  dirResolver,
  DirResolverHelper,
  AutoGenerateImports
} from 'vite-auto-import-resolvers'
import { loadEnv } from 'vite'

// https://vitejs.dev/config/
export default ({ command, mode }) => {
  return defineConfig({
    plugins: [
      vue(),
      DirResolverHelper(),
      AutoImport({
        imports: AutoGenerateImports(),
        dts: 'src/auto-import.d.ts', // 生成 `auto-import.d.ts` 全局声明
        resolvers: [dirResolver({ srcAlias: '@' }), ElementPlusResolver()]
      }),
      Components({
        dts: 'src/components.d.ts', // 生成 `auto-import.d.ts` 全局声明
        resolvers: [ElementPlusResolver()]
      })
    ],
    // 设置打包路径
    base: './',
    // 配置文件别名
    /* resolve: {
        alias: [{ find: '@', replacement: resolve(__dirname, 'src')}]
    }, */
    resolve: {
      alias: {
        // 改变别名
        '@/': `${resolve(__dirname, 'src')}/`
      }
    },
    // 本地运行及反向代理配置
    server: {
      host: '0.0.0.0',
      port: Number(loadEnv(mode, process.cwd()).VITE_APP_PORT),
      // port: 27001, // 设置服务启动端口号
      open: false, // 设置服务启动时是否自动打开浏览器
      https: false,
      strictPort: true, // 端口被占用就退出
      //cors: true, // 允许跨域

      // 设置代理,根据项目实际情况配置
      proxy: {
        '/api': {
          target: loadEnv(mode, process.cwd()).VITE_RE_BASE_URL,
          // target: 'https://jsonplaceholder.typicode.com',
          changeOrigin: true,
          secure: false,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      },
      hmr: {
        overlay: false // 屏蔽服务器报错
      }
    }
    /*build: {
        chunkSizeWarningLimit: 1500, // 分开打包
        rollupOptions: {
            output: {
                manualChunks(id) {
                    if (id.includes('node_modules')) {
                        return id.toString().split('node_modules/')[1].split('/')[0].toString();
                    }
                }
            }
        }
    }*/
  })
}

你可能感兴趣的:(vue,javascript,vue.js,typescript)