vite@4.4.9+element-plus@^2.3.12+path-browserify@^1.0.1 使用报错解决办法 #34
Description
基础环境
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 里面，作为一个工具包
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 = ''
使用
<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>我看有评论说 ， 在vite.config.js 给全局注入一个process 空对象，其实这里会执行 process.cwd() , 空对象.cwd() 执行方法也会报错，除非提供完整的, 这个其实麻烦了一些。 可能还有直接引入 Node的 pollyfill 包， 也不是很好
使用demo
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'));输出:
示例：resolve('/a', 'b')， 结果： /a/b
示例：resolve('/a', 'b', 'c') 结果： /a/b/c
示例：resolve('/a', '/b') 结果： /b
示例：resolve('a', 'b') 结果： a/b解决问题不易： 如果可以， 掘金给我一个小小的 star 掘金地址 ，谢谢