微信PC版访问本地vue项目页面调试及访问空白问题

PrinciplesMan

已于 2022-07-07 14:33:38 修改

阅读量1.9k

点赞数

分类专栏： # Vue2.0 # Web 文章标签： vue.js 微信 javascript

于 2020-12-29 19:27:36 首次发布

本文链接：https://blog.csdn.net/u010227042/article/details/111935276

版权

Vue2.0 同时被 2 个专栏收录

239 篇文章 18 订阅

订阅专栏

Web

77 篇文章 1 订阅

订阅专栏

1.安装微信旧版本2.6

链接：https://pan.baidu.com/s/15no5HCjxydYBa4YB_nvo1g
提取码：pntg

2. 微信引入devtool包

第 1 步：查看微信内置浏览器版本

新建一个 html 页面，写上下面的这些代码，将那个 html 文件上传到服务器上，然后在 PC 端上的微信浏览器访问，查看微信所调用的 Chrome 内核信息&记录 --resources-dir-path 的路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PC端 - 查看微信内置浏览器版本</title>
</head>
<body>
    <script>
        window.open("chrome://version");
    </script>
</body>
</html>

打开网页之后，你会看到下面这张图片，留意下面这两个位置的信息

Chromium 53.0.2785.116
–resources-dir-path=“C:\Users\lenovo\AppData\Roaming\Tencent\WeChat\All Users\CefResources\2581”
C:\Program Files (x86)\Tencent\WeChat\WeChat.exe，这个后面会用到，等下你就知道用处

在这里插入图片描述

第 2 步：下载 devtools_resources.pak

链接：https://pan.baidu.com/s/1quFg4ajBMF9EQNq3qTuQ6g
提取码：xzvx

将devtools_resources.pak放到上面 --resources-dir-path 目录下

在这里插入图片描述
第 3 步：配置微信启动参数

在微信快捷方式，右键点击属性，目前后面增加 -remote-debugging-port=8000

在这里插入图片描述
注：记得重启微信，登录。

第 4 步：在查看公众号之前，最好也把微信安装目录下也放一份 pak 文件，因为我没做这个操作，然后再右键没看到那个调试的菜单，看个人喜欢吧，有问题再弄也可以。

在这里插入图片描述

打开公众号（掘金开发者社区），点击“历史文章”，打开网页之后，右键，你会发现多了图中框柱的菜单栏，点击“Show DevTools”，就可以愉快的调试了。

在这里插入图片描述

常见问题：

Q1：为什么鼠标右键，没看到“图中框柱的菜单栏”

A1：可以在微信安装目录下也放一份 pak 文件，试试

3. 设置vue项目支持https

module.exports = {
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8085, // CHANGE YOUR PORT HERE!
    https: true,
    hotOnly: false,
  },
}

PrinciplesMan

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
3
评论
微信PC版访问本地vue项目页面调试及访问空白问题

1.安装微信旧版本2.62. 微信引入devtool包第 1 步：查看微信内置浏览器版本新建一个 html 页面，写上下面的这些代码，将那个 html 文件上传到服务器上，然后在 PC 端上的微信浏览器访问，查看微信所调用的 Chrome 内核信息&记录 --resources-dir-path 的路径。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫