已尝试过的方案(皆无效):
1.在vite.config.js 中加入extensions:['.mjs']
2.安装npm install koa-compose@4.1.0 -D
3.修改启动端口
4.终止被占用端口
vite.config.js
import {
defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import {
resolve
} from "path"
function pathResolve(dir) {
return resolve(__dirname, ".", dir);
}
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()], // 配置需要使用的插件列表,这里将vue添加进去
// 配置文件别名 vite1.0 是 /@/ 2.0改为/@
//这里是将src目录配置别名为/@方便在项目中导入src目录下的文件
resolve: {
alias: {
"/@": pathResolve("src")
}
},
// 强制预构建插件包
optimizeDeps: {
include: ['axios']
},
// 打包配置
build: {
target: 'modules',
outDir: 'dist', // 指定输出路径
assetsDir: 'assets', //指定生成静态资源的存放路径
minify: 'terser' //混淆器,terset构建后文件体积更小
},
// 本地运行配置,及反向代理配置
server: {
cors: true, //默认启用并允许任何源
// open: true, //在服务器启动时自动在浏览器中打开应用程序
// 反向代理配置,注意rewrite写法
proxy: {
'/dragger_upload': {
target: 'http://localhost:3001/', //代理接口
changeOrigin: true,
rewrite: (path) => path.replace(/^\/dragger_upload/, '')
}
}
}
})
dragger_upload.vue
<template>
<a-upload-dragger
name="file"
:multiple="true"
acions="http://127.0.0.1:3001/"
@change="handleChange"
>
<p class="ant-upload-drag-icon">
<a-icon type="inbox" />
</p>
<p class="ant-upload-text">点击或拖曳文件到此区域上传</p>
<p class="ant-upload-hint">支持单个或批量上传</p>
</a-upload-dragger>
</template>
<script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { message } from "ant-design-vue";
export default {
name: '',
setup() {
const handleChange = (info) => {
const status = info.file.status;
if (status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (status === 'done') {
message.success(`${info.file.name} file upload suceess`)
} else if (status === 'error') {
message.error(`${info.file.name} file upload failed.`)
}
}
return {
handleChange
}
}
};
</script>
<style lang='less'>
</style>
执行了npm run serve不成功,执行npm run dev即可!!