// component: () => import(/* @vite-ignore */ `@/components${item.component}.vue`),vue3动态导入组件报错

在Vue3中使用Vite作为构建工具时，动态导入组件时会出现路径解析错误的问题。这是因为Vite默认只会解析`.vue`和`.js`文件，而对于其他文件类型需要手动配置。

为了解决这个问题，需要在`vite.config.js`中配置`resolve.extensions`选项，将需要解析的文件类型添加到其中。例如，如果需要解析`.scss`和`.less`文件，可以这样配置：

export default {
  resolve: {
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.scss', '.less']
  }
}

然后，在组件中使用动态导入时，需要在路径前添加`@vite-ignore`注释标识，告诉Vite忽略路径解析错误。例如：

component: () => import(/* @vite-ignore */ `@/components${item.component}`)

这样，就能够解决在Vue3中使用Vite作为构建工具时动态导入组件报错的问题了。

相关问题

import { createVitePlugins } from './build/vite/plugins'; import { initProxy } from './build/vite/proxy'; import { resolve } from 'path'; import { ConfigEnv, loadEnv, UserConfig } from 'vite'; import { wrapperEnv } from './build/utils'; const pathResolve = (dir: string) => { return resolve(process.cwd(), '.', dir); }; // https://vitejs.dev/config/ export default function ({ command, mode }: ConfigEnv): UserConfig { const isProduction = command === 'build'; const root = process.cwd(); const env = loadEnv(mode, root); const viteEnv = wrapperEnv(env); return { root, base:'./', resolve: { alias: [ { find: 'vue-i18n', replacement: 'vue-i18n/dist/vue-i18n.cjs.js', }, // /@/xxxx => src/xxxx { find: /\/@\//, replacement: pathResolve('src') + '/', }, // /#/xxxx => types/xxxx { find: /\/#\//, replacement: pathResolve('types') + '/', }, ], }, server: { host: true, hmr: true, proxy: initProxy(), }, plugins: createVitePlugins(viteEnv, isProduction), build: { assetsDir:'static', minify: 'terser', terserOptions: { compress: { //生产环境时移除console drop_console: true, drop_debugger: true, }, }, }, css: { preprocessorOptions: { scss: { // 配置 nutui 全局 scss 变量 additionalData: `@import "/@/styles/variables.scss";@import '/@/styles/mixin.scss';`, }, }, }, }; }在这段配置里，我要加入vuesetupextend这个插件，代码如何修改

要使用vuesetupextend插件，你需要先安装它。可以通过以下命令进行安装：

npm install --save-dev vuesetupextend

然后，在你的vite配置文件中，可以通过以下方式进行使用：

import { createVitePlugins } from './build/vite/plugins';
import { initProxy } from './build/vite/proxy';
import { resolve } from 'path';
import { ConfigEnv, loadEnv, UserConfig } from 'vite';
import { wrapperEnv } from './build/utils';
import vueSetupExtend from 'vuesetupextend';

const pathResolve = (dir: string) => {
  return resolve(process.cwd(), '.', dir);
};

// https://vitejs.dev/config/
export default function ({ command, mode }: ConfigEnv): UserConfig {
  const isProduction = command === 'build';
  const root = process.cwd();
  const env = loadEnv(mode, root);
  const viteEnv = wrapperEnv(env);

  return {
    root,
    base:'./',

    resolve: {
      alias: [
        {
          find: 'vue-i18n',
          replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
        },
        // /@/xxxx => src/xxxx
        {
          find: /\/@\//,
          replacement: pathResolve('src') + '/',
        },
        // /#/xxxx => types/xxxx
        {
          find: /\/#\//,
          replacement: pathResolve('types') + '/',
        },
      ],
    },

    server: {
      host: true,
      hmr: true,
      proxy: initProxy(),
    },

    plugins: [
      vueSetupExtend(),
      ...createVitePlugins(viteEnv, isProduction),
    ],

    build: {
      assetsDir:'static',
      minify: 'terser',
      terserOptions: {
        compress: {
          //生产环境时移除console
          drop_console: true,
          drop_debugger: true,
        },
      },
    },

    css: {
      preprocessorOptions: {
        scss: {
          // 配置 nutui 全局 scss 变量
          additionalData: `@import "/@/styles/variables.scss";@import '/@/styles/mixin.scss';`,
        },
      },
    },
  };
}

需要注意的是，我们将vueSetupExtend插件放在了其他插件之前，这是因为它需要在其他插件之前进行处理。

failed to load config from D:\code\vue3-study\vite-project\vite.config.ts error when starting dev server: Error: The URL must be of scheme file at D:\code\vue3-study\vite-project\vite.config.ts at loadConfigFromBundledFile (file:///D:/code/vue3-study/vite-project/node_modules/.pnpm/registry.npmmirror.com+vite@4.4.0/node_modules/vite/dist/node/chunks/dep-1d3a4915.js:66082:19) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async loadConfigFromFile (file:///D:/code/vue3-study/vite-project/node_modules/.pnpm/registry.npmmirror.com+vite@4.4.0/node_modules/vite/dist/node/chunks/dep-1d3a4915.js:65931:28) at async resolveConfig (file:///D:/code/vue3-study/vite-project/node_modules/.pnpm/registry.npmmirror.com+vite@4.4.0/node_modules/vite/dist/node/chunks/dep-1d3a4915.js:65535:28) at async _createServer (file:///D:/code/vue3-study/vite-project/node_modules/.pnpm/registry.npmmirror.com+vite@4.4.0/node_modules/vite/dist/node/chunks/dep-1d3a4915.js:64805:20) at async CAC.<anonymous> (file:///D:/code/vue3-study/vite-project/node_modules/.pnpm/registry.npmmirror.com+vite@4.4.0/node_modules/vite/dist/node/cli.js:743:24) ELIFECYCLE Command failed with exit code 1.

这个错误是由于在启动开发服务器时无法加载配置文件导致的。根据错误信息，看起来你的配置文件路径不正确，vite.config.ts 文件的路径应该是 D:\code\vue3-study\vite-project\vite.config.ts。

请确保路径正确，并且该文件存在于指定的位置。如果文件存在，你可以尝试重新安装依赖并重新启动开发服务器。如果问题仍然存在，请检查配置文件的语法和内容是否正确。