Electron+React项目路径拼接#后正斜杠转反斜杠如何修复？

path.join是Node.js提供的本地文件路径处理API，在Windows系统下会自动将所有路径分隔符转换为Windows标准的反斜杠\。你将URL hash部分的路径也传入了path.join中，该API不会识别#之后属于URL片段，会把所有/统一转换为\，因此出现异常。

方案1：拆分文件路径与hash部分拼接 #

仅将属于本地文件路径的部分交给path.join处理，hash部分单独拼接，不要传入path.join：

// 仅拼接本地文件路径部分
const htmlFilePath = path.join(__dirname, '../build/index.html')
// 单独拼接hash部分，不受路径API转义影响
const fullAccessPath = `file://${htmlFilePath}#/view/${arg}`

方案2：使用标准URL对象生成路径（更稳妥，跨平台兼容） #

使用浏览器标准URL API处理路径，自动遵循URL规范，不会出现斜杠转义异常：

const htmlFilePath = path.resolve(__dirname, '../build/index.html')
const fileUrl = new URL(`file://${htmlFilePath}`)
// 直接设置hash属性，自动符合URL格式要求
fileUrl.hash = `/view/${arg}`
const fullAccessPath = fileUrl.toString()

• 不要将URL hash、查询参数等不属于本地文件路径的内容传入path.join、path.resolve等Node.js路径处理API
• file协议URL要求使用正斜杠/作为分隔符，与Windows本地路径规则不同，拆分处理两类内容可以彻底避免冲突

内容的提问来源于stack exchange，提问作者Dinesh Udayan