vue3 中vite.config.js相关常用配置详解

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: {
      '@': path.resolve(__dirname, './src'), // 设置 `@` 指向 `src` 目录
    },
  },
  server: {
    port: 3000, // 设置开发服务器端口
    open: true, // 自动在浏览器中打开应用
  },
  build: {
    outDir: 'dist', // 构建时输出目录
    assetsDir: 'assets', // 构建时静态资源目录
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash].js', // 打包时的分块文件名
        entryFileNames: 'js/[name]-[hash].js', // 打包时的入口文件名
        assetFileNames: 'assets/[name]-[hash].[ext]', // 打包时的资源文件名
      },
    },
  },
});

这段代码展示了如何在Vue 3项目中配置Vite，包括别名设置、开发服务器配置和构建配置。通过这样的配置，开发者可以更加高效地开发和构建Vue应用。