Vite 踩坑日记

最近因工作需要，开始接触Vite，之前一直是使用webpack~ 因此之前在webpack踩过的坑现在在Vite试验一遍，做一个简单纪要

vite.config.ts 生产环境中我的静态资源需要使用相对路径，一个最简洁且适合的配置如下。

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
const path = require('path')


export default ({ mode }) => {  
    return defineConfig({    
      base: mode === 'development' ? '/' : './',
      resolve: {
        alias: {
          '@': path.resolve('src')
        }
      },
      plugins: [
        vue()
      ],
      }
  )}

public 和 assets文件得区别和取舍

html  */

publi资源(不编译)
<img src="/img/basemaps/arcgis.png" alt="" />

assets资源(编译)
<img src="@/assets/arcgis.png" alt="" />

/**********************************************/

CSS */

public资源(编译)
.aaa {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  background: url('public/img/basemaps/arcgis.png');
}

assets资源(编译)
.aaa {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  background: url('@/assets/arcgis.png');
}

通过以上纪要我做一个简单的总结：
静态资源存放于public中 在html使用不会被编译 在css使用会被编译
静态资源存放于src中 在html使用会被编译 在css使用会被编译
因此，在编译后需要更换静态资源，而不希望代码经过再次编译的。可以把资源放在public中，如配置文件、logo图片，不能编译的文件等。而其他情况下我们可以把静态资源放到assets中。

【在CSS中使用的背景图片，注意不要把图片放到public中，这样子做编译后会产生两张图片，assets一张，public也会一张，造成资源浪费】