Vite3 learning records

1、 Installable vue-tsc , By running vue-tsc --noEmit Come on vue File type check

2、vite Use esbuild take ts Convert to js

3、 At present vite3.02 In the version , It is temporarily necessary to tsconfig.json Medium compilerOptions In the options , Set up

"isolatedModules": true and "skipLibCheck": true. because vue For the new version ts The support of is not very good , Do adaptation .

4、vite Also through esbuild Come on tsx Be supported . stay vue Can be used in @vitejs/plugin-vue-jsx Plug in to support writing jsx Code .

5、 Use import To load static resources

6、 Use import.meta.glob To implement global import

7、vite Our goal is modern browsers , add to vite Support for traditional browsers is as follows

8、 Common images 、 Media and font file types are vite Automatically detect as resource , And automatically process when packaging , For example, when developing environment The picture path is /img.png, But it will be handled as /assets/img.hashcode.png. Can be in vite.config.ts Use in assetsInclude Options Expand vite Detection of static resources . for example .gif

9、 You can put some single use static resources into public Under the table of contents , Use similar /icon.png Absolute path to access

10、vite adopt rollup To pack

11、 vite adopt import.meta.env To expose environment variables , Common built-in variables are

12、 In the created custom environment variable , Must be VITE_ start , Can pass import.meta.env.VITE_MY To visit in the form of

13、 By means of src Wear under the catalog env.d.ts file , To add type hints for custom environment variables

14、 You can compile environments in different modes at build time

15、vite Unique plug-ins to vite-plugin- start . When using plug-ins , In addition to the package.json In a statement , Still need to be in vite.config.json I quote , And in plugins Use in

16、 Use environment variables when configuring