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