vue3学习记录（二）-- vite.config.js文件介绍

引言

典型的vite初始化后的工程目录如下：

helloworld
├── node_modules
├── public
│   └── index.html
├── src
│   ├── assets
│   ├── components
│   ├── App.vue
│   ├── main.js
│   └── router
│       └── index.js
├── .gitignore
├── package.json
├── vite.config.js
└── yarn.lock 或 package-lock.json

其中vite.config.js是项目的vite配置文件，用于定制 Vite 的构建行为。

vite.config.js 的作用

• 配置开发服务器: 设置端口号、代理、热更新等。
• 定制构建过程: 配置输出目录、代码分割、压缩等。
• 引入插件: 使用 Vite 的插件生态系统，扩展功能，如 CSS 预处理器、路由、状态管理等。
• 配置别名: 简化文件路径，提高代码可读性

常用配置项

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    host: '0.0.0.0',
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://your-api-server',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  resolve: {
    alias: {
      '@': '/src'
    }
  },
  build: {
    outDir: 'dist',
    minify: 'esbuild'
  }
})

• plugins: 配置使用的插件，如 vue 插件用于处理 Vue 文件。
• server: 配置开发服务器，包括主机、端口、代理等。
• resolve: 配置路径别名，如 @ 表示 src 目录。
• build: 配置构建选项，包括输出目录、代码压缩等。

配置示例

配置开发服务器

server: {
  port: 8080, // 设置端口为 8080
  https: true // 开启 HTTPS
}

配置路径别名

resolve: {
  alias: {
    '@components': '/src/components',
    '@utils': '/src/utils'
  }
}

配置 CSS 预处理器

import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [
    vue(),
    // 配置 Less
    {
      ...less({
        javascriptEnabled: true
      }),
      // 配置 Less 文件的路径
      dirs: [resolve(__dirname, './src/styles')]
    }
  ]
})

配置接口代理

proxy: {
  '/api': {
	target: 'http://your-api-server',
	changeOrigin: true,
	rewrite: (path) => path.replace(/^\/api/, '')
  }
}