javascript - vite vue 使用()=>import()动态导入vue组件，怎么使用'@'符号导入？

问题描述：

在vite下，要动态导入vue组件，想通过项目内的绝对路径的形式，也就是使用@符号，而不是使用相对路径

以下测试和测试结果描述
vue事件代码内执行动态导入：() => import("../test/test1.vue");不报错，导入成功。

静态导入：import xx from "@/test/test1.vue",也不会报错，可以使用

vue事件代码内执行动态导入：() => import("@/test/test1.vue");报错，内容如下

[Vue warn]: Failed to resolve async component: () =>  import(__vite__injectQuery(this.pagePathBase+item.view_path, 'import'))
Reason: TypeError: Failed to resolve module specifier '@/test/test1.vue'

这个问题怎么解决，需要在vite.config.js文件里添加什么配置吗

这是vite.config.js文件的内容：

import { createVuePlugin } from 'vite-plugin-vue2'

import { join } from "path";
import { defineConfig } from 'vite'


export default {
  plugins: [
    createVuePlugin(/* options */)
  ],
  resolve: {
    alias: {
      '@': join(__dirname, "src"),
    }
  }
}

第 1 个答案：

改成这个试试

 resolve: {
      alias: [
        // /@/xxxx => src/xxxx
        {
          find: /@\//,
          replacement:  resolve(__dirname, "src") + '/',
        },
      ],
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
    },

第 2 个答案：

将@改成其他符号 比如～

第 3 个答案：

把join(__dirname, "src")换成resolve(__dirname, "src")

第 4 个答案：

这个问题曾经遇到过, 当时也没解决, 查了资料说vite不能设置@

第 5 个答案：

import { resolve } from 'path'

resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },

如果用TS,在tsconfig.json 里也加上

{
  "compilerOptions": {
    
    "paths": {
      "@":["src"],
      "@/*":["src/*"]
    },
    
}

第 6 个答案：

我猜测问题是在async component上而非是alias的问题

Java流在处理上分为字符流和字节流。字符流处理的单元为2个字节的Unicode字符，分别操作字符、字符数组或字符串。请问如何理解： ...