vite+ant-design-vue搭建项目启动显示cannot get

image.png

已尝试过的方案(皆无效):
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>

image.png

阅读 4.1k
1 个回答

执行了npm run serve不成功,执行npm run dev即可!!

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题