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 devfailed 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.mjsat 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-macrosadded 94 packages in 23s20 packages are looking for fundingrun `npm fund` for details