vue3 require 静态图片加载

1. npm install vite-plugin-require-transform

vite.config.js配置

import requireTransform from 'vite-plugin-require-transform';
export default defineConfig({
  plugins: [
    vue(),
    requireTransform.default({
      fileRegex: /.js$|.vue$/
    })
  ]
}
 

2.使用图片时需要require引入，直接写图片路径不生效

       <el-carousel height="250px">
          <el-carousel-item v-for="item in carouselList" :key="item">
            <img :src="item.path" />
          </el-carousel-item>
        </el-carousel>

    const carouselList = reactive([
      { path: require('../../static/img/1.jpg') },
      { path: require('../../static/img/2.jpg') },
      { path: require('../../static/img/3.jpg') }
    ])

3. 新建require.js,新建 utils/require.js 文件

export const require = (imgPath) => {
  try {
    const handlePath = imgPath.replace('@', '..');
    // https://vitejs.cn/guide/assets.html#the-public-directory
    return new URL(handlePath, import.meta.url).href;
  } catch (error) {
    console.warn(error);
  }
};
 

4. 用new URL

const url = new URL('静态路径', import.meta.url).href

6.axios

Vue3中全局配置 axios 的两种方式_vue3配置axios_程序员啊楠的博客-CSDN博客