vite图片处理-Toy模板网

这篇具有很好参考价值的文章主要介绍了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.在项目中引用

</template>
<script>
import { reactive, toRefs, defineComponent, onMounted, inject } from 'vue';
export default defineComponent({
   components: {},
   setup() {
       const getImgSrc = inject('$getImgSrc')
       const state = reactive({
           app:[
               {
                   icon: getImgSrc('/src/assets/homeIcon/01.png'),
                   txt: '目标职责'
               },
               {
                   icon: getImgSrc('/src/assets/homeIcon/02.png'),
                   txt: '制度化管理'
               },
               {
                   icon: getImgSrc('/src/assets/homeIcon/03.png'),
                   txt: '教育培训'
               },
               {
                   icon: getImgSrc('/src/assets/homeIcon/04.png'),
                   txt: '事故管理'
               },
               {
                   icon: getImgSrc('/src/assets/homeIcon/05.png'),
                   txt: '应急管理'
               },
               {
                   icon: getImgSrc('/src/assets/homeIcon/06.png'),
                   txt: '数据中心'
               },
               {
                   icon: getImgSrc('/src/assets/homeIcon/07.png'),
                   txt: '试题库'
               },
           ],
       });
       onMounted(()=>{});
       return {
           ...toRefs(state),
           getImgSrc,
       };
   },
   methods:{
       clickExamine(v){
           this.examineRef.open(v);
       }
   }
});
</script>
<style scoped lang="scss">
</style>
  文章来源地址https://www.toymoban.com/news/detail-532365.html