Vue+vite creation project configuration about vite.config.js file

Vue+vite creation project configuration about vite.config.js file

When creating a Vue project, we have seen methods such as vue-cli creating a project and webpack creating a project.
The current Vue 3 version uses npm/pnpm create vue@latest to create projects, which are built using the vite tool.
The most obvious difference between the created projects is that the project configuration files are named differently. Of course, the configuration syntax is also different.

For projects created by vue-cli, the project configuration file file name is vue.config.js, for projects created by webpack, the project configuration file file name is webpack.config.js, and for projects built with the vite tool, the project configuration file file name is vite .config.js

先贴一个vite官方地址：https://cn.vitejs.dev/

Regarding the configuration syntax of vite.config.js:

After creating the project, the vite.config.js file generated by default is relatively simple, with only a few lines of code:

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))
    }
  },
})

There is basically no problem in running the project or building the large package code directly in this way, but it often cannot meet our needs, so we need to manually add property configurations ourselves.
Simple explanation:

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))
    }
  },
})

Add custom configurations as needed, such as project runtime configuration and project packaging output packaging configuration.

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]'
      }
    }
  }
})

END

Of course, there are many configuration attributes that have different effects. These are temporarily recorded here. Interested experts can check out the official documentation.

If it is helpful to you, please remember to like it (~~)