之前一直用PicGo工具,体验并不是很好,于是在github上找了找其它的工具,发现了这个 picx,可以在线管理github图片

github地址

https://github.com/XPoet/picx

官方demo

https://picx.xpoet.cn/

自建图床(大家用肯定不如官方,我cdn写死了自己的)

https://cym.cm/html/upload/index.html

我有些需求,官方的并不支持,比如自定义cdn域名,根据时间上传到不同目录...然后自己魔改了一下,下面讲讲中间遇到的问题。

图就懒得截了,反正没人看

(一)无法clone项目

在git bash下输入

git clone https://github.com/XPoet/picx

clone项目是非常慢的,甚至直接超时了,原因大家都知道。正好自己搭建了http代理,所以就配置git bash走代理

git config --global http.proxy http://xxx:xxx
git config --global https.proxy https://xxx:xxx

然后就可以clone下来了

(二)把项目跑起来

我是个写app的,这个vue没学过,所以也不知道怎么把项目跑起来。于是问了问公司前端,教了我一些。

他让我直接把整个项目文件夹拖到 vs code

然后打开 package.json 文件,鼠标移动到 build 上,点击 运行脚本 就可以把项目跑起来了...

然后报错了,他说我没安装依赖,让我打开终端,输入

npm i

安装依赖

结果提示不知道npm是什么?原来我没安装nodejs,于是我又去安装nodejs

nodejs下载地址

http://nodejs.cn/download/

安装好之后,再次输入npm i安装依赖,结果又报错了,不知道哪个依赖说要我安装python?还是2.7版本...于是我又去安装python2.7

python27下载

https://www.python.org/download/releases/2.7/

安装好之后再次npm i,项目就跑成功了,在文件夹里生成了一个新的文件夹,叫做dist

打开之后,里面有个 index.html,在浏览器打开,竟然是空白页面。

按下F12,发现很多报错,都是404,原来是vue生成的文件路径默认是 /,根目录,所以当然找不到

vscode里,picx文件夹,新建一个文件 vue.config.js
里面写

module.exports = {
  publicPath: './'
}

/ 根目录替换成 ./ 当前目录,然后重新build跑项目,这次打开 index.html 显示的就和官方Demo一样了。

把dist文件夹放到自己的网站上就可以了

(三)魔改

...无非是替换之前的路径,改成自己的,没什么好说的

标签: github, 图床

添加新评论