vite 配置vite 配置基本配置配置一下就可以运行vite和vue了 root 指定打包文件入口 base 启动

vite 配置

基本配置

cnpm i vite vue @vitejs/plugin-vue vue-tsc typescript @types/node typescript-vue-plugin -D

配置一下就可以运行vite和vue了

import path from 'path'
export default defineConfig({
  plugins: [vue()]
})

root 指定打包文件入口
base 启动服务的公共路径
publicDir:指定的静态资源路径
cacheDir:'node_modules/.vite' 资源缓存路径
clearScreen: true, // 控制台是否清屏
envDir: '', // 加载存放 .env文件的目录
envPrefix: '',// 默认VITE_,设置环境变量的前缀
assetsInclude: [''],//支持的其他类型文件都可以在这里找到
resolve.alias:定义路径别名
resolve.mainFields: [],//解析包的入口点时尝试的字段列表
resolve.extensions: [],//导入时想要省略的扩展名列表
build.assetsDir:指定打包生成静态资源存放路径
build.assetsInlineLimit:指定需要编译为base64 的时候图片资源大小
build.chunkSizeWarningLimit:指定打包超过多少需要警告
build.emptyOutDir:构建的时候是否请客以前的输出目录
build.sourcemap:是否生成source Map
plugins:[] 配置的插件位置

配置静态文件

配置静态文件输出目录

这里可以看出vite的静态文件输出是js css 不分开的，要分开的话可以自己作为判断

单独配置图片输出路径

export default defineConfig({
  base: './',
  build: {
    rollupOptions: {
      output: {
        // assetFileNames: "[name]-[hash].[ext]"
        assetFileNames: (assetInfo) => {
          console.log(assetInfo.name, assetInfo.name.includes('png'), '11111')
          if (assetInfo.name.includes('.png')) {
            return 'static/[name]-[hash].[ext]'
          }
          return '[name]-[hash].[ext]'
        }
      }
    },
    // assetsDir: 'static', //静态资源输出目录
    assetFileNames: '1024'  // 小于1024kb资源，打包成base64，内联进js文件，
  },
  plugins: [vue()]
})

`其他的文件也可以在这里定义输出位置`

配置css 处理

localsConvention: "camelCaseOnly", // 修改生成的配置对象的key的展示形式(驼峰还是中划线形式)
scopeBehaviour: "local", // 配置当前的模块化行为是模块化还
generateScopedName: '[name][local][hash:5]' // 类名生成规则
hashPrefix: "hello", // 生成hash会根据你的类名 + 一些其他的字符串(文件名 + 他内部随机生成一个字符串)去进行生成, 如果你想要你生成hash更加的独特一点, 你可以配置hashPrefix, 你配置的这个字符串会参与到最终的hash生成, （hash: 只要你的字符串有一个字不一样, 那么生成的hash就完全不一样, 但是只要你的字符串完全一样, 生成的hash就会一样）
globalModulePaths: ["./componentB.module.css"], // 代表你不想参与到css模块化的路径

路径别名配置

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

配置扩展名

  resolve: {
    alias: {
      '@': '/src'
    },
    extensions: ['js', 'vue', 'jsx', 'css']
  },

配置输出目录

build: { outDir: 'build' // 打包文件的输出目录 }

server.host

指定服务器监听哪个 IP 地址

server: { host: true // 监听所有地址 }

optimizeDeps.force

是否开启强制依赖预构建。node_modules 中的依赖模块构建过一次就会缓存在 node_modules/.vite/deps 文件夹下，下一次会直接使用缓存的文件。而有时候我们想要修改依赖模块的代码，做一些测试或者打个补丁，这时候就要用到强制依赖预构建。

optimizeDeps: { force: true // 强制进行依赖预构建 },

cacheDir

cacheDir:'node_modules/.vite'