Vue3 + vite + antd2 vite.config.js及SyntaxError: The requested module ‘/node_modules/.vite/ant-design

项目中使用Vue3 + vite + antdv2.x的vite.config.js配置文件,复制粘贴即可使用!

/**
 * Vite配置文件
 * @author 斗宗强者
 * @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: [
        vue(),
        //antd按需引入配置
        ViteComponents({
            customComponentResolvers: [AntDesignVueResolver()],
        }),
    ],
    resolve: {
    	//路径别名配置
        alias: {
            "@": resolve(__dirname, ".", "src")
        },
        mainFields: ["module"],
        //需要省略的文件后缀名 注意:如果在此处配置了忽略的后缀名在引入时如果带有后缀名会报错
        extensions: [".vue", ".js"]
    },
    // 强制预构建插件包
    optimizeDeps: {
        include: ["axios"]
    },
    css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    javascriptEnabled: true
                }
            }
        }
    },
    // 打包配置
    build: {
        target: "modules",
        outDir: "dist", //指定输出路径
        assetsDir: "assets", // 指定生成静态资源的存放路径
        minify: "terser" // 混淆器,terser构建后文件体积更小
    },
    // 本地运行配置,及反向代理配置
    server: {
        cors: true, // 默认启用并允许任何源
        open: true, // 在服务器启动时自动在浏览器中打开应用程序
        // 反向代理配置,注意rewrite写法,开始没看文档在这里踩了坑
        proxy: {
            "/api": {
                target: "http://localhost:9091",   //代理接口
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, "")
            }
        }
    }
});

附上package.json有时候版本问题会导致莫名其妙的错误,比如自定义组件无法导入问题
//有可能会遇到如下问题:
SyntaxError: The requested module '/node_modules/.vite/ant-design-vue_es.js?

SyntaxError: The requested module '/node_modules/.vite/ant-design-vue_es.js?

这是版本问题导致的,我爬了1个多小时才爬出来,唉

"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"
  }

你可能感兴趣的:(JavaScript,javascript,vue.js,前端)