vite.config.ts配置

最新推荐文章于 2025-04-16 11:14:31 发布

少年包青菜

最新推荐文章于 2025-04-16 11:14:31 发布

阅读量2.9k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_50884068/article/details/122224062

版权

本文详细介绍了Vite的配置，包括使用`defineConfig`导入插件，设置别名以优化模块解析，预构建优化依赖如`axios`，以及构建设置如目标、输出目录、压缩选项。此外，还讲解了本地开发的服务器配置，如端口、跨域处理和自动打开浏览器，以及反向代理`/api`到远程接口的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // 如果报错__dirname找不到，需要安装node,执行yarn add @types/node --save-dev
      "@": path.resolve(__dirname, "src"),
      "comps": path.resolve(__dirname, "src/components"),
    }
  },
  // 强制预构建插件包
  optimizeDeps: {
    include: ['axios'],
  },
  // 打包配置
  build: {
    target: 'modules',
    outDir: 'dist', //指定输出路径
    assetsDir: 'assets', // 指定生成静态资源的存放路径
    minify: 'terser' // 混淆器，terser构建后文件体积更小
  },
  //项目部署的基础路径
  base: "/",
  // 本地运行配置，及反向代理配置
  server: {
    //服务器主机名
    host: "localhost",
    //端口号
    port: 3000,// 不知为何更改会有问题
    //设为 true 时若端口已被占用则会直接退出，
    //而不是尝试下一个可用端口
    strictPort: true,
    cors: true, // 默认启用并允许任何源
    open: true, // 在服务器启动时自动在浏览器中打开应用程序
    //https.createServer()配置项
    https: false,
    //反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
    proxy: {
      '/api': {
        target: 'https://api.muxiaoguo.cn',   //代理接口
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
})