Linux环境前端vue项目打包失败，路径大小写敏感问题怎么解决？

---

前言

公司的前端项目一直没使用自动打包部署，都是手动build发布到服务器上面，感觉很不方便。所以用了gitlab runner 自动打包发布。部署完环境之后，在Linux上面打包前端代码一直报错，找不到文件，发现是文件路径大小写问题导致。

---

一、Gitlab-runner Linux环境打包报错？

打包一直报错文件找不到，实际上在windows下面打包是OK的，原因是英文vue router配置里面引入组件路径大小写错误，正确路径应该是../components/Page/...

二、什么原因？

原因是windows下路径大小写不敏感，如/page/index.js== Page/index.js,但是在Linux环境下·/page!=/Page 它们表示两个不同的文件夹，所以在我们开发时应该遵守规范，严格按照大小写引入。还有个一原因，我在写路由的时候，会省略index.vue文件，比如/page/login/index.vue 写成page/login，打包的时候也会报错.

三.怎么解决？

• 如果是路由错误文件比较少，逐个修改路径到正确即可
• 若文件比较多怎么办？一个个修改费时费力，还容易漏掉，显然不可取，这里我写了个nodeJs脚本来解决，简单方便

Tips: 脚本放在src/router/ 文件夹下面，和路由文件index.js 平级。

/*
 * @Author: Alan
 * @Date: 2021-12-29 17:05:21
 * @Description: 自动校正路径大小写问题
 */

let fs = require('fs');  // 引入fs模块
let path = require('path')

let getPath = path.join(__dirname, 'index.js'); // 获取路由文件的路径

let fileText = fs.readFileSync(getPath, 'utf-8') // 读取路由文件

let pathReplace = {};

let regx = /(?<=require\(\[')\S*(?='\])/g  // 正则匹配出路由文件里面的组件引用路径
//  我这里加载组件的方式是： component: resolve => require(['../components/xxx'] )
// 正则匹配规则可按自己的需求修改

// 匹配文件路径
let str = fileText.match(regx);

str.forEach(val => {
    let filePath = path.join(__dirname, val);  // 拼接出完整的文件路径去找文件
    // 检查文件是否为目录

    try {
        let stats = fs.statSync(filePath);
        if (stats.isDirectory()) {  // 判断是否为文件夹
            filePath = path.join(filePath, 'index.vue'); // 拼上省略的index.vue 
        }
    } catch (err) {
    	// 若读取失败，则是我们省略了.vue 后缀 导致读取不到文件，这里给拼上
        let fileBaseName = path.basename(filePath);
        let fileBaseDir = path.dirname(filePath);
        filePath = path.join(fileBaseDir, fileBaseName + '.vue')
    }
	
	// 核心方法 可以返回文件的真实路径，区分大小写的那种
    let realPath = fs.realpathSync.native(filePath, function (err, data1) {
        if (err) {
            console.log(err)
        }
    })

    dir = replaceDir(realPath) // 得出正确的引入路径
    if (val !== dir) { // 判断下我们的index.js 文件中路径是否正确
        pathReplace[val] = dir  // 错误的话，存到对象中，方便我们替换
    }
})

// 正则截取路由文件中需要用到的路径
function replaceDir(dir) {
    let regx2 = /(?<=\\web-root\\src\\)\S*/g   // web-root 为项目根目录，可自行修改
    dir = dir.match(regx2)[0];
    dir = '../' + dir.replace(/\\/g, '\/')
    return dir
}

console.log(pathReplace); 

// 正则匹配替换路径
fileText = fileText.replace(regx, (val) => {
    let newVal = pathReplace[val];
    if (newVal) {
        return newVal
    }
})


//重写文件
fs.writeFile(path.join(__dirname, 'index.js'), fileText, (err) => {
    console.log(err);
})

---

总结

使用脚本解决问题刚开始可能感觉比较麻烦，但当熟练起来会感觉很方便，效率也快。当然最重要的是有一个良好的编码习惯，尤其是多人协作的时候，能避免这些让人头疼的坑。

---

PS ：前端菜鸟一只，有不对的地方望各位大佬多多指正~ ~