vite配置基础vue3项目，alias、自动引入和jsx

项目配置

一、配置@引用路径

1、配置vite.config.js

resolve: {  
    alias: {    
        "@": path.resolve(__dirname, 'src'),  
    }
}

2、配置js.config.json

{  
    "compilerOptions": {    
    "baseUrl": "",    
    "paths": {      
        "@/*": ["./src/*"] }    
    },  
    "exclude": ["node_modules", "dist"]
}

这里是告诉编辑器的

二、配置自动引入vue的ref等方法，就不用每次手动引入了

1、安装unplugin-auto-import插件

npm i unplugin-auto-import -D

2、配置vite.config.js

plugins: [ 
    AutoImport({ imports: ['vue'] }),
    dts: 'src/auto-imports.d.ts' //设置保存文件这里不配置有可能router不会自动更新导入],

三、配置vite的jsx

1、安装@vitejs/plugin-vue-jsx插件

npm i "@vitejs/plugin-vue-jsx -D

2、配置vite.config.js

plugins: [ 
    vueJsx()
],