vite.config.js of Vue3-vite-antdv2.x

created at 12-23-2021 views: 103


vite.config.js configuration for vue3 + vite + antdv2.x in the project, just copy and paste it to use:

 * Vite configuration file
 * @author Dou Zong strong
 * @since 2021-12-16 23:09

import {resolve} from "path";
import {defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";
import ViteComponents, {AntDesignVueResolver} from'vite-plugin-components';

export default defineConfig({
    plugins: [
        //antd introduces configuration on demand
            customComponentResolvers: [AntDesignVueResolver()],
    resolve: {
    //Path alias configuration
        alias: {
            "@": resolve(__dirname, ".", "src")
        mainFields: ["module"],
        //File suffix name that needs to be omitted Note: If an ignored suffix name is configured here, an error will be reported if it is imported with a suffix name
        extensions: [".vue", ".js"]
    // Mandatory pre-built plugin package
    optimizeDeps: {
        include: ["axios"]
    css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    javascriptEnabled: true
    // Package configuration
    build: {
        target: "modules",
        outDir: "dist", //Specify the output path
        assetsDir: "assets", // Specify the storage path of the generated static resources
        minify: "terser" // obfuscator, the file size is smaller after terser is built
    // Local running configuration, and reverse proxy configuration
    server: {
        cors: true, // enable by default and allow any source
        open: true, // automatically open the application in the browser when the server starts
        // Reverse proxy configuration, pay attention to the writing of rewrite, I did not read the document at the beginning, I stepped on the pit here
        proxy: {
            "/api": {
                target: "http://localhost:9091", //Proxy interface
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, "")


Attach package.json Sometimes version problems can cause inexplicable errors, such as the problem that custom components cannot be imported

//The following problems may be encountered:
SyntaxError: The requested module'/node_modules/.vite/ant-design-vue_es.js?

This is caused by a version issue:

"dependencies": {
    "@vitejs/plugin-vue": "^2.0.1",
    "ant-design-vue": "^2.0.0-rc.3",
    "axios": "^0.24.0",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "sass": "^1.45.0",
    "sass-loader": "^12.4.0",
    "vite-babel-plugin": "0.0.2",
    "vite-plugin-components": "^0.13.3",
    "vue": "^3.2.4",
    "vue-router": "^4.0.11",
    "@ant-design/icons-vue": "^6.0.1"
  "devDependencies": {
    "@vue/compiler-sfc": "^3.2.4",
    "babel-plugin-import": "^1.13.3",
    "vite": "^2.7.2"
created at:12-23-2021
edited at: 12-23-2021: