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

### 基础环境
```
vite@4.4.9
element-plus@^2.3.12
path-browserify@^1.0.1
```

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

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

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

#### 第一步

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

```js

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

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
}

```

我看有评论说 ， 在` vite.config.js ` 给全局注入一个`process `空对象，其实这里会执行 `process.cwd()` , `空对象.cwd()` 执行方法也会报错，除非提供完整的, 这个其实麻烦了一些。 可能还有直接引入 Node的 pollyfill 包， 也不是很好

使用demo

```js
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'));

```

输出:

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

解决问题不易： 如果可以， 掘金给我一个小小的 star [掘金地址](https://juejin.cn/user/2436173498942055) ，谢谢