vite@4.4.9+element-plus@^2.3.12+path-browserify@^1.0.1使用报错解决办法

基础环境

kotlin 复制代码

vite@4.4.9
element-plus@^2.3.12
path-browserify@^1.0.1

vite 移除了node的垫片包，所以 , 所以，在使用 path-browserify 一定会报错， process is not defined

解决办法

path-browserify 源码中，作者没有去处理这个问题，那么，我们将源码中的 resolve方法 copy到项目中即可

说白了你就是要解决 path.resolve('/a', 'b') --> /a/b 这个问题

第一步

复制 normalizeStringPosix 方法和 resolve 方法到你项目的utils 里面，作为一个工具包

javascript 复制代码

function normalizeStringPosix(path, allowAboveRoot) {
  var res = '';
  var lastSegmentLength = 0;
  var lastSlash = -1;
  var dots = 0;
  var code;
  for (var i = 0; i <= path.length; ++i) {
    if (i < path.length)
      code = path.charCodeAt(i);
    else if (code === 47 /*/*/)
      break;
    else
      code = 47 /*/*/;
    if (code === 47 /*/*/) {
      if (lastSlash === i - 1 || dots === 1) {
        // NOOP
      } else if (lastSlash !== i - 1 && dots === 2) {
        if (res.length < 2 || lastSegmentLength !== 2 || res.charCodeAt(res.length - 1) !== 46 /*.*/ || res.charCodeAt(res.length - 2) !== 46 /*.*/) {
          if (res.length > 2) {
            var lastSlashIndex = res.lastIndexOf('/');
            if (lastSlashIndex !== res.length - 1) {
              if (lastSlashIndex === -1) {
                res = '';
                lastSegmentLength = 0;
              } else {
                res = res.slice(0, lastSlashIndex);
                lastSegmentLength = res.length - 1 - res.lastIndexOf('/');
              }
              lastSlash = i;
              dots = 0;
              continue;
            }
          } else if (res.length === 2 || res.length === 1) {
            res = '';
            lastSegmentLength = 0;
            lastSlash = i;
            dots = 0;
            continue;
          }
        }
        if (allowAboveRoot) {
          if (res.length > 0)
            res += '/..';
          else
            res = '..';
          lastSegmentLength = 2;
        }
      } else {
        if (res.length > 0)
          res += '/' + path.slice(lastSlash + 1, i);
        else
          res = path.slice(lastSlash + 1, i);
        lastSegmentLength = i - lastSlash - 1;
      }
      lastSlash = i;
      dots = 0;
    } else if (code === 46 /*.*/ && dots !== -1) {
      ++dots;
    } else {
      dots = -1;
    }
  }
  return res;
}

/**
 * link 代码来源 path-browserify@1.0.1 包
 * @returns
 */
export function resolve() {
  var resolvedPath = '';
  var resolvedAbsolute = false;
  var cwd;

  for (var i = arguments.length - 1; i >= -1 && !resolvedAbsolute; i--) {
    var path;
    if (i >= 0)
      path = arguments[i];
    else {
      if (cwd === undefined)
        // cwd = process.cwd();
      path = '';
    }

    // Skip empty entries
    if (path.length === 0) {
      continue;
    }

    resolvedPath = path + '/' + resolvedPath;
    resolvedAbsolute = path.charCodeAt(0) === 47 /*/*/;
  }

  // At this point the path should be resolved to a full absolute path, but
  // handle relative paths to be safe (might happen when process.cwd() fails)

  // Normalize the path
  resolvedPath = normalizeStringPosix(resolvedPath, !resolvedAbsolute);

  if (resolvedAbsolute) {
    if (resolvedPath.length > 0)
      return '/' + resolvedPath;
    else
      return '/';
  } else if (resolvedPath.length > 0) {
    return resolvedPath;
  } else {
    return '.';
  }
}

第二步：注释有关 process相关的，其实就一行，然后将 path = ''

使用

html 复制代码

<script setup name="SidebarItem">
import { isExternal, resolve} from '@/utils/index.js'

const resolvePath = routePath => {
  if (isExternal(routePath)) {
    return routePath
  }

  if (isExternal(props.basePath)) {
    return props.basePath
  }

  const fullPath = resolve(props.basePath, routePath)

  console.log(fullPath);

  return fullPath
}
</script>

其他方式

1、在vite.config.js 给全局注入一个process 空对象，其实这里会执行 process.cwd() , 空对象.cwd() 执行方法也会报错，除非提供完整的, 这个其实麻烦了一些。

2、可能还有直接引入 Node的 pollyfill 包，也不是很好

使用demo

javascript 复制代码

console.log(`示例：resolve('/a', 'b')， 结果：`,resolve('/a', 'b'));  

console.log(`示例：resolve('/a', 'b', 'c')  结果：`,resolve('/a', 'b', 'c'));  

console.log(`示例：resolve('/a', '/b')  结果：`, resolve('/a', '/b')); 
console.log(`示例：resolve('a', 'b')  结果：`,resolve('a', 'b'));

输出:

javascript 复制代码

示例：resolve('/a', 'b')， 结果： /a/b
示例：resolve('/a', 'b', 'c')  结果： /a/b/c
示例：resolve('/a', '/b')  结果： /b
示例：resolve('a', 'b')  结果： a/b