Vue项目创建时，我们见过vue-cli 创建项目和webpack 创建项目等方式。现在Vue 3版本使用npm/pnpm create vue@latest 创建项目，是搭配使用vite工具构建的。创建完成的项目，最明显的去别就是，项目配置文件命名不同，当然，配置语法也有不同。

vue-cli 创建的项目，项目配置文件文件名为vue.config.js,webpack 创建项目的项目配置文件文件名为webpack.config.js，而vite工具构建完成的项目，项目配置文件文件名为vite.config.js

关于vite.config.js的配置语法：

创建项目之后，默认生成的vite.config.js文件比较简单，只有简单几行代码：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [vue()],

  resolve: {

    alias: {

      '@': fileURLToPath(new URL('./src', import.meta.url))

    }

  },

})

这样直接运行项目或者build大包代码也基本上没有什么问题，但是往往无法满足我们的需要，因此需要自己手动添加属性配置。简单解释：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

// 这里是创建文档之后vite贴出的官方文档地址

// https://vitejs.dev/config/

export default defineConfig({

  // 需要用到的插件数组，这里是用vue

  plugins: [vue()],

  resolve: {

  // resolve.alias属性配置文件自定义路径。如下：设置‘@'代替‘./src'

    alias: {

      '@': fileURLToPath(new URL('./src', import.meta.url))

    }

  },

})

根据需要添加自定义配置，比如项目运行时的配置及项目打包输出的打包配置。

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

// 这里是创建文档之后vite贴出的官方文档地址

// https://vitejs.dev/config/

export default defineConfig({

  // 需要用到的插件数组，这里是用vue

  plugins: [vue()],

  resolve: {

  // resolve.alias属性配置文件自定义路径。如下：设置‘@'代替‘./src'

    alias: {

      '@': fileURLToPath(new URL('./src', import.meta.url))

    }

  },

  // 开发服务器配置server

  server: {

  // host指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址。

    host: true,

    // 开发服务器端口配置。（注意：如果配置的端口已经被使用，Vite 会自动尝试下一个可用的端口，要看项目运行时最终生成的端口地址。）

    port: '9081',

    // open项目运行完毕是否自动在默认浏览器打开

    open: true,

    // 是否使用https，需要证书

    https: false,

    // proxy代理配置

    proxy: {

      '/api': {

        target: 'http://xxxx',

        changeOrigin: true,

        rewrite: path => path.replace(/^\/api/, '')

      }

    }

  },

  // build打包构建配置

  build: {

  // 打包输出的文件夹名称

    outDir: 'dist',

    // 静态资源文件保存的文件夹名称

    assetsDir: 'static',

    // 是否启用css代码拆分

    cssCodeSplit: true,

    // 打包构建后是否生成 source map 文件。

    sourcemap: true,

    // 打包构建时压缩混淆使用的混淆器

    minify: 'esbuild',

    // 自定义底层的 Rollup 打包配置（Rollup文档地址：https://cn.rollupjs.org/configuration-options/）

    rollupOptions: {

      // 输出配置

      output: {

      // 输出的文件自定义命名

        chunkFileNames: 'js/[name]-[hash].js',

        entryFileNames: 'js/[name]-[hash].js',

        assetFileNamesL: '[ext]/[name]-[hash].[text]'

      }

    }

  }

})