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

  • Z时代
  • 2024-03-09
  • 分类：IT

在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"),
    }
  }
}

回答：

改成这个试试

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

回答：

将@改成其他符号 比如～

回答：

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

回答：

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

回答：

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

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

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

回答：

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

以上是 vite vue 使用()=>import()动态导入vue组件，怎么使用'@'符号导入？ 的全部内容， 来源链接： utcz.com/p/933611.html

回到顶部