解决vite构建的项目中使用path报错

目录

一、下载path-browserify

二、配置vite.config.js

三、process部分

---

一、下载path-browserify

npm install path-browserify --save

Vite 中需用 path-browserify 替代 Node.js 原生 path 模块，这是关键配置

二、配置vite.config.js

// vite.config.js（可选配置，仅当出现导入报错时添加）
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // 手动指定 path 别名，确保导入生效
      path: 'path-browserify'
    }
  }
})

至此就可以了

三、process部分

要是path中还用到process部分，还需下载

npm install vite-plugin-node-polyfills --save-dev

然后配置

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

export default defineConfig({
  plugins: [
    vue(),
    // 新增这行，自动补齐 Node.js 全局变量和模块
    nodePolyfills({
      // 只补齐需要的模块，减小打包体积
      include: ['path']
    })
  ],
  resolve: {
    alias: {
      // 保留之前的 path 别名（如果加了的话）
      path: 'path-browserify'
    }
  }
})