node版本v20.11.1
vite.config.js的配置

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import ReactivityTransform from '@vue-macros/reactivity-transform/vite'; // 报错的地方

// https://vite.dev/config/
export default defineConfig(({ mode }) => {

  const env = loadEnv(mode, process.cwd())

  return {
    plugins: [
      vue(),
      // 解决 import {ref, reactive ...} from 'vue' 大量引入的问题
      AutoImport({
        imports: ['vue', 'vue-router'],
      }),
      ReactivityTransform(),
    ],
    // 反向代理解决跨域问题
    server: {
      // host: 'localhost' // 只能本地访问
      host: '0.0.0.0', // 局域网别人也能访问
      port: Number(env.VITE_APP_PORT),
      // 运行时自动打开浏览器
      // open: true,
      proxy: {
        [env.VITE_APP_BASE_API]: {
          target: env.VITE_APP_SERVICE_API,
          changeOrigin: true,
          rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), ""),
        },
      },
    },
    resolve: {
      // 配置路径别名
      alias: [
        // @代替src
        {
          find: '@',
          replacement: path.resolve('./src')
        }
      ]
    },
  }

})

报错内容:

PS D:\workspace_web\vite-project5> npm run dev                

> vite-project5@0.0.0 dev
> vite --mode dev

failed to load config from D:\workspace_web\vite-project5\vite.config.js
error when starting dev server:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@vue-macros/reactivity-transform' imported from D:\workspace_web\vite-project5\node_modules\.vite-temp\vite.config.js.timestamp-1735117409623-0caa9fcb1575a.mjs
    at packageResolve (node:internal/modules/esm/resolve:853:9)
    at moduleResolve (node:internal/modules/esm/resolve:910:20)
    at defaultResolve (node:internal/modules/esm/resolve:1130:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36)


报错原因是因为没有找到'@vue-macros/reactivity-transform' 这个包,引入这个包就好了,执行以下命令。

npm i-D unplugin-vue-macros
PS D:\workspace_web\vite-project5> npm i-D unplugin-vue-macros
Unknown command: "i-D"

To see a list of supported npm commands, run:
  npm help
PS D:\workspace_web\vite-project5> npm i -D unplugin-vue-macros

added 94 packages in 23s

20 packages are looking for funding
  run `npm fund` for details
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐