静态资源

图片加载

1. 在 HTML 或者 JSX 中，通过 img 标签来加载图片，如:

<img src="../../assets/a.png"></img>

2. 在 CSS 中通过 background 属性加载图片，如:

background: url('../../assets/b.png') norepeat;

3. 在 JavaScript 中，通过脚本的方式动态指定图片的src属性，如:

document.getElementById('hero-img').src = '../../assets/c.png'

4. vue

import logoSrc from '@assets/11.png';
<img :src="logoSrc" alt="" />

配置 @assets

// vite.config.ts
{
  resolve: {
    // 别名配置
    alias: {
      '@assets': path.join(__dirname, 'src/assets')
    }
  }
}

生产环境处理

1. 自定义部署域名
   指定base参数即可:

// vite.config.ts
// 是否为生产环境，在生产环境一般会注入 NODE_ENV 这个环境变量，见下面的环境变量文件配置
const isProduction = process.env.NODE_ENV === 'production';
// 填入项目的 CDN 域名地址
const CDN_URL = 'xxxxxx';

// 具体配置
{
  base: isProduction ? CDN_URL: '/'
}

// .env.development
NODE_ENV=development

// .env.production
NODE_ENV=production

2. 图片压缩

pnpm i vite-plugin-imagemin -D
//vite.config.ts
plugins: [
    // 忽略前面的插件
    viteImagemin({
      // 无损压缩配置，无损压缩下图片质量不会变差
      optipng: {
        optimizationLevel: 7
      },
      // 有损压缩配置，有损压缩下图片质量可能会变差
      pngquant: {
        quality: [0.8, 0.9],
      },
      // svg 优化
      svgo: {
        plugins: [
          {
            name: 'removeViewBox'
          },
          {
            name: 'removeEmptyAttrs',
            active: false
          }
        ]
      }
    })
  ]

如果报错怎是安装包不稳定 换 yarn