vite查漏补缺

一、静态资源处理

//png txt后缀的文件不会检测是否存在，js json vue文件会检测是否存在
import test from "@/assets/imgs/test1.png"
console.log(test);  //   /src/assets/imgs/test1.png返回图片的绝对路径

// 显式加载资源为一个 URL
import test from "@/assets/imgs/test1.png?url"  //等效于上面那种方式，默认选项

//会检测所有类型的文件是否存在，毕竟要转换为二进制
import test from "@/assets/imgs/test.png?raw"
console.log(test); // 转换为二进制

// 加载为 Web Worker
import Worker from './worker.js?worker'

二、JSON具名导入

{
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "Anytown"
  }
}

import { name, age } from '@/assets/imgs/test.json';
console.log(name); // 输出 "John Doe"
console.log(age);  // 输出 30

//这个是具名导入，json文件的编译结果，可以看出只能具名导出第一层
//原生esmodule导入导出只能是js，在vite中能导入json,png等格式是因为vite做了处理，将其变成了js文件
//这里说的js文件，不是指后缀名为.js的文件，浏览器也不是通过后缀名来判断文件的类型
//是通过响应头里面的Content-Type的类型来判断的
export const name = "John Doe";
export const age = 30;
export const address = {
	street: "123 Main St",
	city: "Anytown"
};
export default {
	name: name,
	age: age,
	address: address
};