vite图片处理

踩坑点：之前在webpack中引用方式是require，后面我就一直想用require插件，然后就在网上查到了下面的方法，就是这个导致打包速度很久，后来我想了想，webpack和vite的编译方式都不一样啊，嗯，这不强扭的瓜不甜。后来我就用了vite内部的import.meta.globEager，写了一个getImgSrc方法，通过inject引入。

主要问题点：解决打包速度，尽量用框架自带的方法，不要想着以前的。就像人总会变。

写一个插件

export default function requirePlugin() {

    return {

      // 插件名称

      name: "vite-plugin-vue-requireToUrlPlugin",

      // 默认值post：在 Vite 核心插件之后调用该插件，pre：在 Vite 核心插件之前调用该插件

      // enforce: "post",

      // 代码转译，这个函数的功能类似于 "webpack" 的 "loader"

      transform(code, id, opt) {

        const vueRE = /\.vue$/;

        const require = /require/g;

       

        // 过滤掉非目标文件

        if (!vueRE.test(id) || !require.test(code)) return code;

        // 匹配 require() 内的内容

        const requireRegex = /require\((.*?)\)/g;

        // 将 require() 内的内容替换为 new URL 的写法

        const finalCode = code.replace(requireRegex, "new URL($1,import.meta.url).href");

         

        // 将转换后的代码返回

        return finalCode;

      },

    };

  }

引用

import requireToUrlPlugin from './plugins/requireToUrlPlugin'; 
export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? './' : '/',
  plugins: [
    vue(),
  ],
  css: {
    preprocessorOptions: {
      // 全局样式引入
      scss: {
        additionalData: '@import "./src/theme/element.scss";@import "./src/theme/main.scss";',
        javascriptEnabled: true,
      }
    }
  },
  resolve: {
    alias: {
      "@": path.join(__dirname, "./src"),
    },
  },
  build:{
    minify: 'terser',
    productionSouceMap: false,
    rollupOptions: {
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    },
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    }
  }
  
})
 

1.在plugins/elementPlus.js中

app.provide('$getImgSrc',(name)=>{

      if (typeof name === 'undefined') return 'error.png'

      const modules = import.meta.globEager('/src/**/*.{png,svg,jpg,jpeg}')

      if (modules[name]) return modules[name].default

    })

2.在项目中引用