在创建 Vue 应用之前，先去运行一下在本地开发环境上的后端服务，我要用的是一个 WordPress 后端服务 .. 如果你是根据宁皓网的 WordPress 开发：开发环境 这个课程搭建的 WordPress .. 运行它可以这样 ..

先要打开系统上的命令行工具 .. mac 可以用终端，windows 用户推荐安装使用 cmder ...

先进入到 WordPress 项目所在的目录 .. 我的是在桌面上的 webapp-season2-wordpress 这个目录的下面 .. 进来以后，再进入到 trellis 这个目录 ..

然后执行一下

vagrant up

这样会启动运行 WordPress 网站需要的虚拟机 .. 虚拟机上已经配置好了 WordPress 需要的运行环境 .. 虚拟机启动以后，我们就可以在浏览器上访问到在本地上运行的 WordPress 网站了 ..

在搭建 WordPress 运行环境的时候，我给网站设置的主机名是 wp-dev.ninghao.net ... 在浏览器上打开这个地址 ..

如果你配置好了 WordPress 网站，没有做其它的配置，打开为网站设置的主机名应该会正常显示网站内容 ..

不过我这里显示的是一个 502 错误 .. 这个是因为我在开发其它项目的时候，因为项目需要，配置使用了一个 SSH 通道 .. 让互联网可以直接访问到本地开发环境 ..

回到命令行 .. 打开系统上的 hosts 文件看一下 .. 在 mac 上，这个文件是在 /etc 这个目录的下面 ..

原来这里有一条记录，让 wp-dev.ninghao.net 这个主机名，指向 192.168.50.5 这个 ip 地址，这个 ip 地址是我的本地开发环境项目的虚拟机用的一个 ip 地址 ..

但是我之前注释掉了这条记录 .. 这个记录是 vagrant-hostmanager 插件自动添加的 ..

回到命令行 .. 运行一下 tunnel .. 这个是我自定义的一个命令 .. 它做的事就是在本地与服务器之间打一个通道 ..

ctrl + c 可以停止一下 ..

这个 tunnel 其实就是一个别名 .. 编辑一下用户主目录下面的 .bash_profile 这个文件 ..

在这里定义了一个 alias .. 名字是 tunnel ..

真正执行的命令是后面这个 ssh 命令 .. 宁皓网有个课程《把本地开发环境发布到互联网》，里面详细的介绍了这个打通道的方法 ..

再执行一下 tunnel 这个命令 ..

回到浏览器 .. 刷新一下 ..

现在就可以访问在本地上运行的这个 WordPress 网站了 .. 因为我用了一个 ssh 通道，所以这个网站的地址应该可以在互联网上访问到 .. 真正提供服务的是在我的本地电脑上运行的这个 WordPress ..

使用这种方法的好处就是在调试一些外部接口的时候比较方便。比如支付宝，微信支付等等，这些服务接口有些功能需要回调我们的服务端接口，这就需要服务端接口能在互联网上被访问到 ..

现在显示的就是一个 WordPress 网站 ..

打开网站的登录界面 .. 输入用户名 .. 密码 .. 先登录一下 ..

然后进入到网站的管理后台 .. 打开文章 ..

这里我提前在网站上添加了一些文章内容 .. 等会儿我们会先在 Vue 应用里面，去显示这里出现的这些文章内容 ..