记录一下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();
                    }
                }
            }
        }
    }*/
  })
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值