记录使用Nuxt3+Vite遇到的问题

公司官网项目，基于antfu大佬的vitesse-nuxt3框架搭建，Nuxt3+Vite+Ts+Unocss，记录一下遇到的问题

1、nuxt3动态引入图片

const glob = import.meta.glob("~/assets/imgs/products/*", {
  eager: true,
});
const getImageAbsolutePath = (imageName: string): string => {
  return glob[`/assets/imgs/products/${imageName}`]["default"];
};

模板使用

<img :src="getImageAbsolutePath('hxgn-1.webp')" alt="" w-80 h-80>

2、项目要求使用px单位，Unocss是em，故需要进行修改

安装，@unocss/preset-rem-to-px，在unocss.config.ts文件内引入,添加配置项

import presetRemToPx from '@unocss/preset-rem-to-px'
export default defineConfig({
  presets: [
    presetRemToPx({ baseFontSize: 4 }),
  ]
})

3、区分环境配置

根目录创建env目录，创建需要的环境文件，如࿱