文章目录
- 前言
- 一、Gitlab-runner Linux环境打包报错?
- 二、什么原因?
- 三.怎么解决?
- 总结
前言
公司的前端项目一直没使用自动打包部署,都是手动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 :前端菜鸟一只,有不对的地方望各位大佬多多指正~ ~
更多推荐
Linux环境前端vue项目打包失败,路径大小写敏感问题怎么解决?
发布评论