解决vite使用alias引入图片不显示的问题

vite是一个强大的前端构建工具，它可以帮助我们快速构建前端应用程序。vite的alias功能可以让我们使用别名来代替冗长的模块路径。这在引入图片时非常有用，因为图片的路径通常都很长。

但是，vite的alias功能在引入图片时存在一个问题：它无法直接引入图片。这是因为图片不是JavaScript模块。为了解决这个问题，我们可以使用一些技巧来解决。

首先，我们需要安装一个名为vite-plugin-imagemin的插件。这个插件可以帮助我们压缩图片，从而减少图片的体积。

npm install vite-plugin-imagemin --save-dev

然后，我们需要在vite的配置文件中配置这个插件。

// vite.config.js
const { defineConfig } = require('vite')
const imageminPlugin = require('vite-plugin-imagemin')

module.exports = defineConfig({
  plugins: [
    imageminPlugin({
      gifsicle: {
        optimizationLevel: 7,
      },
      optipng: {
        optimizationLevel: 7,
      },
      svgo: {
        plugins: [
          {
            removeViewBox: false,
          },
        ],
      },
    }),
  ],
})

接下来，我们需要在代码中使用alias来引入图片。

import logo from './logo.png'

需要注意的是，在使用alias引入图片时，我们需要在图片路径前加上~符号。这是因为~符号表示当前项目的根目录。

如果我们想在vite中使用alias引入图片，我们还需要在vite的配置文件中配置一个别名。

// vite.config.js
const { defineConfig } = require('vite')
const imageminPlugin = require('vite-plugin-imagemin')

module.exports = defineConfig({
  plugins: [
    imageminPlugin({
      gifsicle: {
        optimizationLevel: 7,
      },
      optipng: {
        optimizationLevel: 7,
      },
      svgo: {
        plugins: [
          {
            removeViewBox: false,
          },
        ],
      },
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '~': path.resolve(__dirname, './src/assets'),
    },
  },
})

这样，我们就可以在vite中使用alias来引入图片了。