Vue3 + Vite配置项目

1. 配置路径别名

1. 安装 path

2. 从 path 里面导出 resolve

3. 在 vite.config.js 配置路径别名 @

// 1
npm i path

// 2
import { resolve } from 'path'

// 3
 resolve: {
    alias: {
      "@": resolve(__dirname, "src")
    }
  },

2. 配置ref、reactive等自动导入

1. 安装 unplugin-auto-import 插件

2. 在vite.confing.js配置自动引入

// 1
npm i -D unplugin-auto-import

// 2
import AutoImport from 'unplugin-auto-import/vite'


export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
       imports: ['vue'], dts: 'src/auto-import.d.ts'
    })],
})

3. 配置全局sass

 1. 安装scss 

npm install -D sass

2. 配置vite.config.js

 css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/css/main.scss";' // 可能报异常，需要把@import改成@use
      }
    }
  },