Vue项目在Webpack和Vite中使用静态资源图片

最新推荐文章于 2024-04-07 14:32:23 发布

parade岁月

最新推荐文章于 2024-04-07 14:32:23 发布

阅读量916

点赞数

分类专栏： # Vue 文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/parade0393/article/details/125114756

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

WebPack

WebPack+Vue3

其中~和@的使用参考官方文档和Vue3.0在template、script、style中引用图片资源的方式

<template>
  <div>
    <img class="wh" src="~@/assets/logo.png" alt="">
    <p class="wh ig"></p>
    <p :style="styleObject"></p>
    <p :style="styleO"></p>
    <p :style="styleIm"></p>
  </div>
</template>

<script setup>
import logo from '@/assets/logo.png'
const styleObject = {
  marginLeft: '13px',
  width: '100px',
  height: '100px',
  backgroundImage: 'url(' + require('@/assets/logo.png') + ')',
  backgroundSize: '100% 100%'
}
const styleO = {
  marginLeft: '13px',
  width: '100px',
  height: '100px',
  backgroundImage: `url(${require('@/assets/logo.png')})`,
  backgroundSize: '100% 100%'
}

const styleIm = {
  marginLeft: '13px',
  width: '100px',
  height: '100px',
  backgroundImage: `url(${logo})`,
  backgroundSize: '100% 100%',
  backgroundColor: 'red'
}
</script>

<style lang="scss">
  .wh{
    width: 100px;
    height: 100px;
  }
  .mr13{
    margin-right: 13px;
  }
  .ig{
    background-image: url("~@/assets/logo.png");
    background-size: 100% 100%;
  }
</style>

Vite

在vite中不能使用require，并且需要显示设备@别名

<template>
  <div class="about">
    <img class="wh" src="@/assets/images/1.png" alt="" />
    <p class="wh mr13" :style="styleObject"></p>
    <p class="wh ig"></p>
    <p class="wh mr13" :style="styleO"></p>
  </div>
</template>

<script setup>
import pp from "@/assets/images/1.png";//import 必须放入顶部
const styleObject = {
  marginLeft: "13px",
  backgroundImage: `url(${pp})`,
  backgroundSize: "100% 100%"
};
const styleO = {
  marginLeft: "13px",
  backgroundSize: "100% 100%",
  backgroundImage: new URL('@/assets/images/1.png',import.meta.url).href
}
</script>

<style scoped>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
.wh {
  width: 100px;
  height: 100px;
}
.mr13{
  margin-right: 13px;
}
.ig{
  background-image: url("@/assets/images/1.png");
  background-size: 100% 100%;
}
</style>

//vite.config.js
import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})