以搭建 Vuepress 文档为例，展示用 VSCode 来远程开发

2022 年 1 月 10 日
本文字数：1977 字
阅读完需：约 6 分钟

背景

现在的开发模式，应该是有相当一部分的开发同学，是在 Windows 环境下做开发，然后生产和测试环境在 Linux 的某一发行版上。

我们在本地开发好后，将文件部署到 Linux 环境后，有时候需要临时调整一些内容，而在本地开发在上传可能效率会比较低下，而直接在 Linux 终端里用 vi/vim 有时候也会遇到一些效率问题（尽管 vim 真的很好用，但做代码调整的时候，还是不如编辑器来的直接）

所以，远程开发就有了实际的使用需求。

我这里以编写 Vuepress 框架的文档为例，介绍一下开发端为 Windows，服务端为 WSL(2)和 CentOS 两种环境的远程开发模式。

搭建 vuepress 依赖环境

这个环节，其实可以省掉的，因为官方文档给出的步骤已经相当完善了，但真不是咱像炫耀或者怎么着，是真的有一些同学不太熟悉这块，尤其是还没从 Jquery 框架转过来的同学。所以我还是想用我的方式来介绍一下。

底层环境--NodeJs

在安装 vuepress 之前，先把 node 装上。

安装 node 有 3 种普遍的方式，

1 是下载官方编译好的版本，然后设置好环境变量；
2 是直接下载源码在本地编译
3 是直接通过 rpm 包来安装，但这种需要提前修改包源，不如可能安装的版本过于古老，像 CentOS7 的默认 node 的 rpm 包是 6.x,npm 是 3.x

ps.因为我对这部分不太熟悉，所以这里踩了坑。最开始我是用的官方编译好的版本，然后通过设置软连接来配置的 node 环境，结果后边用 yarn 的时候一直报 require nodejs 的错。后来用了编译源码的方式，流程是比较顺利，但是编译的过程时间太长了，等的不耐烦我就直接中断了。最后还是采用的第一种方式，但不用设置软链接，而是直接配置环境变量就可以了。

我这里建议不想折腾的同学直接下载编译好的版本，另外，我个人还建议开发环境（像 redis，es，docker 等）尽可能都按照下载压缩包的方式来安装，因为安装流程是统一的，如果换了 Linux 的发行版，安装方式都是一样的。

好了，说了半天，来安装Node吧

前面唠叨了那么多，最后就是建议选这个方式来安装

a. 下载编译好的版本

# 下载wget https://nodejs.org/dist/v16.13.1/node-v16.13.1-linux-x64.tar.xz# 解压tar xf node-v16.13.1-linux-x64.tar.xz# 重命名一下（也可以不用）mv node-v16.13.1-linux-x64 node16# 设置环境变量export NODE_HOME=/usr/local/src/node16export PATH=$NODE_HOME/bin:$PATH# 保存配置文件source /etc/profile

复制代码

完成上面的步骤后，就可以在控制台查看 node 和 npm 版本了

b. 设置软连接的方式我也放在这里，但我遇到的情况是安装 yarn 的时候依旧会提示依赖 nodejs

# 下载，解压和上面的方式一致...# 设置软连接ln -s /usr/local/nodejs/bin/npm /usr/local/bin/ln -s /usr/local/nodejs/bin/node /usr/local/bin/

复制代码

如此设定好后，仍然可以打印 node 和 npm 版本

次底层环境--Yarn

配置好 node 之后，使用 npm 安装 yarn

npm install yarn -g

复制代码

安装好后，可以打印 yarn 版本

初始化 Vuepress

完成了开发环境的配置，初始化就很简单了，

# 选择一个目录mkdir /home/tony/myvuepress & cd /home/tony/myvuepress# 初始化开发环境yarn init# 创建vuepress环境yarn add -D vuepress# 创建第一篇文档（这就跟官方的教程一样了）mkdir docs && echo '# Hello VuePress' > docs/README.md# 在 package.json 中添加一些 scripts{  "scripts": {    "docs:dev": "vuepress dev docs",    "docs:build": "vuepress build docs"  }}# 开发环境下运行yarn docs:dev