vite创建基于vue3按需导入的ant design vue项目

创建vue3项目

以ts为语法的vue3项目

yarn create @vitejs/app my-vue-app --template vue-ts

以js为语法的vue3项目

yarn create @vitejs/app my-vue-app --template vue

添加css预处理器支持

Vite 只针对现代浏览器，所以建议使用原生 CSS 变量和实现 CSSWG 草案的 PostCSS 插件（例如 postcss-nesting），并编写简单的、未来标准兼容的 CSS

但 Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为他们安装特定的 vite 插件，但相应的预处理器依赖本身必须安装：

# .scss and .sass
npm install -D sass

# .less
npm install -D less

# .styl and .stylus
npm install -D stylus

如果是用的是单文件组件，可以通过 <style lang="sass">（或其他与处理器）自动开启。

Vite 为 Sass 和 Less 改进了 @import 解析，因而 Vite 别名也同样受用，另外，url() 中的相对路径引用的，与根文件不同目录中的 Sass/Less 文件会自动变基以保证正确性。

由于与其 API 冲突，@import 别名和 URL 变基不支持 Stylus。

你还可以通过在文件扩展名前加上 .module 来结合使用 CSS modules 和预处理器，例如 style.module.scss。

vite配置文件

vite.config.js

// vite.config.js
export default {
  // 配置选项
}

vite.config.ts (该方式会有语法提示)

import { defineConfig } from 'vite'

export default defineConfig({
  // ...
})

代理配置

export default {
  server: {
    proxy: {
      // 字符串简写写法
      '/foo': 'http://localhost:4567/foo',
      // 选项写法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      },
      // 正则表达式写法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/fallback/, '')
      }
    }
  }
}

端口配置

export default {
    server: {
        port: 8888
    }
}

指定服务器主机名

export default {
    server: {
        host: '0.0.0.0'
    }
}

配置别名

如果用的是ts，那么需要先安装npm install @types/node -D

// vite-config.ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "src"),
            "components": path.resolve(__dirname, "src/components"),
            "layouts": path.resolve(__dirname, "src/layouts"),
            "utils": path.resolve(__dirname, "src/utils"),
        }
    }
})

为了让webstorm也能识别这写别名，添加一个webstorm.js的配置文件，并作为webpack的配置文件

webstorm.js

module.exports = {
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "src"),
            "components": path.resolve(__dirname, "src/components"),
            "layouts": path.resolve(__dirname, "src/layouts"),
            "utils": path.resolve(__dirname, "src/utils"),
        }
    }
}

tsconfig.json也配置別名

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "paths": {
      "@": ["src/*"],
      "layouts/*": ["src/layouts/*"],
      "utils/*": ["src/utils/*"],
      "components/*": ["src/components/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

配置按需导入插件

npm i unplugin-vue-components -D

安装 ant-design-vue

npm i --save ant-design-vue@next

配置 ant design vue 2.x按需导入

// vite-config.ts
import {defineConfig} from 'vite'
import Components from 'unplugin-vue-components/vite'
import vue from '@vitejs/plugin-vue'
import ViteComponents, {
    AntDesignVueResolver,
} from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        Components({
            dts: true, // 启用ts支持
            resolvers: [
                // https://github.com/antfu/unplugin-vue-components
                AntDesignVueResolver(), // 配置 ant design vue 按需加载支持
            ]
        }),
    ]
})