使用VS Code插件在本地调试页面代码

March 15, 2021

使用VS Code插件，我们可以在本地直接调试开发中的页面。
在本地启用静态资源服务器，通过内网ip地址访问页面，保存后刷新就能看到修改后的页面，而不用“禁用，打包，上传，启用”后才能看到修改后的效果。

  1. 打开VS Code插件，登录

  2. 点击“打开页面布局项目”按钮，选择一个空的文件夹作为项目根目录

  3. 项目中的第一层文件夹与Admin的页面代码一一对应，点击刷新按钮可以重新拉取服务器端的所有页面代码，其中：

  • 文件夹图标表示尚未上传页面代码
  • 红点的文件夹图标表示已经上传了页面代码，但没有启用
  • 绿点的文件夹图标表示上传并启用了页面代码

  1. 右键点击下载并解压按钮同步线上的页面代码，或者新建一个静态页面

  2. 点击“开启/关闭本地开发服务器”按钮，启动本地静态资源服务器

  3. 开发服务器启动成功后，可以看到服务器的ip地址和端口号

  4. 在浏览器中可以打开所有的静态资源

  5. 在Admin中新建自定义菜单，跳转的地址填入本地服务器页面地址，注意：
    网页端https访问http有跨域问题，需要使用localhost；移动端要保证手机和电脑在同一个局域网内，使用ip地址访问

  6. 在网页端/移动端设计器中选择上一步中的自定义菜单，保存。在浏览器或者手机中查看效果

Recent Posts