VScode—03（VScode发布带JS脚本的网页）-CFANZ编程社区

VScode—03（VScode发布带JS脚本的网页）

这一篇发布一个加载界面时 JQ弹出一个Hello word的提示框窗体重点是发布配置

1）JS文件创建与HTML一样新建不过后缀是.JS

2）Jquery 从官网选一个（这里我用的是Download the compressed, production jQuery 3.4.1）赋值粘贴到刚建好好的JS文件中

（本文里Jq文件叫 jquery-1.4.1.js）好了我们可以使用Jq了（Jq就是封装好了JAVAscript 所以学JQ要有javascript基础）

如图我们准备好了代码

VScode—03（VScode发布带JS脚本的网页）_Chrome

3）发布这里要准备好插件（Debugger for Chrome）按F5 会出现如图的选择框（选择 Chrome）

VScode—03（VScode发布带JS脚本的网页）_Chrome_02

选择后我们会得到一个Launch.json文件里面有一些配置文件我们需要增加橙色部分

VScode—03（VScode发布带JS脚本的网页）_配置文件_03

{
            "name": "使用本机 Chrome 调试",
            "type": "chrome",
            "request": "launch",
             "file": "${workspaceRoot}/index.html",
        //  "url": "http://mysite.com/index.html", //使用外部服务器时,请注释掉 file, 改用 url, 
       并将 useBuildInServer 设置为 false "http://mysite.com/index.html
            "runtimeExecutable": "C:\\Program Files 
             (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安装路径
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
        //  "preLaunchTask":"build",
            "userDataDir":"${tmpdir}",
            "port":5433
        }

修改配置文件参数

3-1）Chrome 路径

右击属性看你的谷歌浏览器所在位置这里就是你的Chrome的安装路径

VScode—03（VScode发布带JS脚本的网页）_html_04