Vite-Config

Vite文档

---

vite.config.js

  import postcssPresetEnv from 'postcss-preset-env'
  export default defineConfig({
    resolve:{
      alias:{
        "@": path.resolve(__dirname,"./a.js")
      }
    }
    optimizeDeps:{
      excludes:[], //将指定数组中的依赖不进行预构建
    },
    envPrefix: "ENV_", //环境变量前缀
    css:{ //对css的行为进行配置
      // modules配置最终会传给postcss modules
      modules:{ //是对css模块化的默认行为进行覆盖
        localConvention: "camelCase", // 修改生成的配置对象的Key的展示形式（驼峰还是中划线形式）
        scopeBehaviour: "local", // 配置当前模块化行为是模块化还是全局化（有hash就是开启模块化的一个标志，因为他可以保证产生不同的hash值来控制我们的样式类名不被覆盖）
        generateScopedName: "[name]_[local]_[hash:5]", // 生成类名的规则
        generateScopedName: (name,filename,css) => {
          // name -> 代表的是你此刻css文件中的类名
          // filename -> 是你当前css文件的绝对路径
          // css -> 给的就是你当前样式
          // 配置成函数以后，返回值就决定了他最终的显示类型
          return `${name}_${Math.Random().toString()}`
        },
        hashPrefix: "hello", // 生成hash会根据你的类型去进行生成，如果你想你的hash更加独特一些，可以配置hashPrefix
        globalModulePaths:["./component.css"] // 代表你不想参与到CSS模块化的路径
      },
      preprocessOptions:{ //key + config key表示预处理器的名字
        less:{ //整个的配置对象都会最终给到less的执行参数（全局参数）中去
          math: "always",
          globalVars:{ //全局变量
            mainColor: "red"
          }
        },
        sass:{

        }
      },
      devSourceMap:true, // 开启css文件的sourceMap(文件索引)
      postcss:{
        plugins:[postcssPresetEnv({
          importForm: path.resolve(__dirname,"./variable.css") // 就好比你现在让postcss去知道，有一些全局变量他需要优先导入
        })]
      }
    },
    build:{ //构建生产包的一些配置
      rollupOptions:{ // 配置rollup的一些构建
        output:{ //控制输出
          //在rollup中，hash表示你的文件名字和文件内容进行组合计算得来的结果
          assetFileNames:"[hash].[name].[ext]"
        }
      },
      assetsInlineLimit:4096000,
      outDir:"testDir", //配置输出目录
      assetsDir:"static", //配置输出目录中静态资源目录
      emptyOutDir: true, //build前清空dist文件夹
    },
    plugins: [
      config(options){
      
      },
      configureSever(sever){
      
      },
      transformIndexHtml(html){

      },
      configResolved(options){
        // 整个配置文件的解析流程完全完毕以后会走的钩子
        // vite在内部有一个默认的配置文件
      },
      configurePreviewServer(sever){

      },
      options(rollupOptions){

      }
    ]
  })

Vite插件

• vite-aliases // 引入后自动把文件夹识别为@+文件夹
• vite-plugin-html // 帮我们动态控制整个html中的文件
• vite-plugin-mock // 模拟数据