Vite 使用要点

遍历文件夹

使用 glob进行遍历

// 多入口
const genInputOpt = () => {
  let inputOpt = {};
  glob.sync("./src/pages/*/main.js").forEach((filepath) => {
    let fileList = filepath.split("/");
    let len = fileList.length;
    let fileName = fileList[len - 2];
    if (fileName === "m") {
      inputOpt[fileName] = resolve(__dirname, `index.html`);
    } else {
      inputOpt[fileName] = resolve(__dirname, `${fileName}/index.html`);
    }
  });
  return inputOpt;
};

export default defineConfig({
  build: {
    rollupOptions: {
      input: genInputOpt(),
    },
  },
});

定义 less 全局变量

借助css.preprocessorOptions来完成

export default {
  css: {
    preprocessorOptions: {
      less: {
        additionalData: `@import "${resolve(
          __dirname,
          "src/pages/m/assets/style/variable.less"
        )}";`, // less变量文件夹，这样可以全局中使用
      },
    },
  },
};