vue “xxx” is not a function 解决方法

### 解决 `vite preview` 启动时 `'xxx is not a function'` 错误 当遇到 `vite preview` 启动时报错 `'xxx is not a function'` 的情况，通常是因为某些模块或函数未被正确加载或存在兼容性问题。以下是几种可能的原因及解决方案： #### 1. 检查依赖项版本一致性 确保所有使用的库和框架版本相互兼容。特别是对于 Vue 和其他插件来说，不同版本之间可能存在 API 变化。 ```bash npm outdated ``` 如果发现有不一致的地方，则更新这些包到最新稳定版[^1]: ```bash npm update --save ``` #### 2. 清理缓存并重新安装节点模块 有时本地的 node_modules 文件夹可能会损坏或者残留旧文件影响构建过程。尝试清理 npm 缓存以及删除再重建 node_modules: ```bash rm -rf node_modules package-lock.json npm cache clean --force npm install ``` #### 3. 修改配置文件中的路径解析规则 在使用 TypeScript 或者特定于环境下的别名导入时，需确认 vite.config.ts 中是否有正确的 alias 设置来处理自定义路径映射关系。例如，在 vite 配置中加入如下设置可以解决一些常见的路径问题[^2]： ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ resolve: { alias: { '~/': `${__dirname}/src/`, }, }, }) ``` #### 4. 调整打包模式下 polyfill 行为 部分浏览器内置方法在生产环境中缺失的情况下会抛出此类异常。可以在 vite.config.js 中通过 @rollup/plugin-polyfill 提供必要的填充支持[^3]： ```javascript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; // https://vitejs.dev/config/ export default defineConfig(({ command }) => ({ plugins: [ vue(), ...(command === 'build' ? [require('@rollup/plugin-polyfill')()] : []), ], })); ``` #### 5. 审核代码逻辑是否存在异步调用不当之处 仔细审查报错位置附近的 JavaScript / TypeScript 代码片段，尤其是涉及到 Promise、async-await 结构的部分，防止因回调地狱而导致上下文丢失从而引发此类型的运行时错误。 ---