vite常用配置

一、常用配置

root

root 是项目根路径，可以是绝对路径，一般配合fs.strict来限制访问root以外的路径。

base

base是开发或生产环境服务的公共基础路径。假如部署的项目在端口后面加入了虚假路径，那么这个属性，可以改为 /虚假路径 从而可以使得资源可以在nginx可以被访问。

例如：

某个网站需要在8848端口下的/admin下面展示，那么我们就可以配置成：

export default defineConfig({
    base: '/admin'
})

plugins

这个属性一般用于配置一些第三方vite支持的插件 ，具体一些具体配置项，会在使用的文档上说明，根据文档配置即可。

publicDir

publicDir是作为静态资源服务的文件夹。默认值是public，如果你的静态资源不想被放在public，可以修改其路径。

cacheDir

cacheDir是缓存文件目录。也就是你的vite项目开发阶段的缓存存放的目录。默认值为node_modules/.vite，如果不想把目录放在node_modules下也是可以修改的。

define

define是用于定义全局变量的。例如：

# vite.config.js
export default defineConfig({
  define: {
    MY_NAME: 2
  }
})

# App.vue

resolve

alias

alias用于路径别名替换。

alias: {
   "@": path.resolve(__dirname, 'src')
}

dedupe

dedupe是配置模块的去重规则,用于告诉Vite在构建过程中对模块进行去重，以减小最终构建产物的体积。

dedupe: ['lodash']

 extensions

extensions是配置导入时想要省略的扩展名列表。

extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']

 preserveSymlinks

preserveSymlinks启用此选项会使 Vite 通过原始文件路径（即不跟随符号链接的路径）而不是真正的文件路径（即跟随符号链接后的路径）确定文件身份。

 preserveSymlinks: false

css

modules

modules该选项用于告诉Vite在处理CSS时是否要启用CSS模块化。

css: {
    modules: true
}

server

这个非常常用，废话不说上配置

server: {
    host: '0.0.0.0',
    port: '8848',
    mode: 'development', // 环境变量模式，将会把 serve 和 build 时的模式 都 覆盖掉。
    strictPort: true, // 端口被占用直接退出
    open: true,
    https: false, // 启用TLS + http/2
    proxy: {}, // 配置代理规则
    cors: true, // 为开发服务器配置 CORS,默认启用
    headers: {}, // 指定服务器响应的header
    hmr: {}, // 禁用或配置 HMR 连接
    middlewareMode: false, // 以中间件模式创建 Vite 服务器。
    origin: 'http://127.0.0.1:8848', // 用于定义开发调试阶段生成资源的 origin。
    // 是否忽略服务器 sourcemap 中的源文件，这是默认值，它将把所有路径中含有 node_modules 的文件添加到忽略列表中。
    sourcemapIgnoreList(sourcePath, sourcemapPath) {
      return sourcePath.includes('node_modules')
    },
    watch: {
      ignored: ['!**/node_modules/vue/**'], // 被监听的包必须被排除在优化之外，以便它能出现在依赖关系图中并触发热更新。
    },
    fs: {
      strict: true, // 限制为工作区 root 路径以外的文件的访问。
      allow: ['..'], // 限制哪些文件可以通过 /@fs/ 路径提供服务。设置为 true 时，访问这个目录列表外的文件将会返回 403 结果。
      deny: ['.env', '.env.*', '*.{crt,pem}'], // 用于限制 Vite 开发服务器提供敏感文件的黑名单。比 fs.allow 更高级
    }
  },

build

build也很常用。

 build: {
    target: 'modules', // 设置最终构建的浏览器兼容目标。
    outDir: 'results', // 指定输出路径
    assetsDir: 'assets', // 指定生成静态资源的存放路径,相对于outDir
    assetsInlineLimit: 4096,// 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。
    cssCodeSplit: true, // 启用/禁用 CSS 代码拆分。
    sourcemap: false, // 是否生成map文件
    reportCompressedSize: true, //  gzip 压缩大小报告。
    chunkSizeWarningLimit: 500, //规定触发警告的 chunk 大小。（以 kbs 为单位）。
    terserOptions: {
      compress: {
        drop_console: true, // 生产环境下去除console
        drop_debugger: true, // 生产环境下去除debugger
      }
    },
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html') // 入口，改入口可以配置多个，可以实现多页面
      },
      output: {
        // 自定意代码分块
        manualChunks: {
          vue: ["vue"],
        },
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
      }
    }
  }

envPrefix

envPrefix是用于指定环境变量的前缀，主要是防止一些变量发生冲突。

envPrefix:"REACT_APP"

 

二、开发文件

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

export default defineConfig({
  root: process.cwd(),
  base: '/',
  plugins: [vue()],
  publicDir: 'public',
  cacheDir: ".vite",
  resolve: {
    alias: {
      "@": path.resolve(__dirname, 'src'),
      "~": path.resolve(__dirname, 'src/assets')
    },
    dedupe: ['lodash'],
    conditions: ['es2015', 'module', 'browser'],
    extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json'],
    preserveSymlinks: false
  },
  css: {
    modules: true,
  },
  server: {
    host: '0.0.0.0',
    port: '8848',
    mode: 'development',
    strictPort: true,
    open: true,
    https: false,
    proxy: {},
    cors: true,
    sourcemapIgnoreList(sourcePath, sourcemapPath) {
      return sourcePath.includes('node_modules')
    },
    fs: {
      strict: true,
      allow: ['..'],
      deny: ['.env', '.env.*', '*.{crt,pem}'],
    }
  },
  build: {
    target: 'modules',
    outDir: 'results',
    assetsDir: 'assets',
    assetsInlineLimit: 4096,
    cssCodeSplit: true,
    sourcemap: false,
    reportCompressedSize: true,
    chunkSizeWarningLimit: 500,
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      }
    },
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html')
      },
      output: {
        manualChunks: {
          vue: ["vue"],
        },
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
      }
    }
  }
})

还可以配合.env使用。