如何在Visual Studio Code中通过LocalHost打开html文件

最新推荐文章于 2023-07-04 16:24:04 发布
最新推荐文章于 2023-07-04 16:24:04 发布
阅读量5.7k 收藏 10
点赞数 5
分类专栏： 前端基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40935723/article/details/105880218
版权

最近这几天开学React前端框架，然后就在B站找到了一个入门视频，开始了学习，在React学习视频中，我看那个老师使用的是Visual Studio Code来写前端代码，于是我就立刻下载了Visual Studio Code，但是在这个学习视频中，我发现老师直接打开html文件居然是localhost的，而我自己打开的file，这个开始我并没有在意，但是在后面学习的过程中，我遇到了一个问题，就是在用react是引入自己写的js的时候，无法加载到chrome中，但是通过ie是可以加载的，于是各种百度，终于找到了问题，原来是通过file打开，对于chrome而言，它认为这个请求自定义的js是跨域的，然后网上的解决方式是将去加载到web容器中就可以解决这个问题，难受呀，于是就开始考虑怎么将它加载到web容器中，首先想到的是node js，然后失败，最后终于被我找到了Visual Studio Code有个插件就可以完美解决这个问题。

文章目录

解决方案

安装插件 Live Server
教程如下：
在这里插入图片描述
插件安装完成后我们就需要考虑如何用chrome打开(默认是IE)。

配置chrome打开页面

在这里插入图片描述
在这里插入图片描述

chrome打开

然后用Visual Studio Code打开html，然后右击Open with Live Server就可以了
在这里插入图片描述

大碗稀饭
关注
专栏目录
使用node.js创建一个简易服务器，让本地的HTML页面可以通过localhost方式访问
JiangLittleBai的博客
09-28 3939
最近一直在复习当中，所以会一写 HTML/js什么的。但是都是通过file:///Users/baiyinyu/Documents/privateProgram/test/918.html的方式去查看执行结果的。 。。。。 看起来丑不说， 其他电脑上也不能访问这个。。。 也不能在手机上访问这个页面。。。。。。。。。 就在想啊，本地的vue项目为什么可以通过localhost:port的方法访问了， 怎么做才能实现这个效果呢？ 这时候我们的node.js就派上用场了。。。。。 注：这篇文章只实现了最简单最基础
html如何执行本地命令,关于javascript：如何在localhost上运行html文件？
weixin_31966453的博客
06-05 3021
我有一个HTML文件，并在本地主机上运行它。但是，这个文件包括使用网络摄像头的镜像。例如，如何在本地主机上运行此HTML文件？当选中"实时"复选框时，从本示例开始的网络摄像机。谢谢你的回复。可以在HTTP服务器中运行文件。1>在系统中安装node.js。2>在命令中，运行命令npm install http server-g3>导航到cmd中文件文件夹的特定路径并运行命令http...
VSCode通过LocalHost打开html文件
wqsbenren的博客
07-13 9357
首先安装上图的插件，接着如下图右键HTML文件选择Open with Live Server即可
在localhost上运行html文件
m0_37714008的博客
07-01 3078
安装node.js 在powershell窗口中, 运行命令npm install -g http-server 导航到cmd中文件文件夹的特定路径并运行命令http-server-p${your-port}./ node 运行命令node./server/index.js 当前server下的文件
将本地html文件运行到本地服务器localhost上
m-dididid的博客
04-23 4536
下载http-server npm i -g http-server 在html文件目录下运行 http-server 然后就能看到可以在本地服务器打开 而不是file下
VS Code 快捷打开(localhost)PHP页面
Web_chicken的博客
11-22 3720
VS Code 快捷打开localhost 1.下载插件 记住是貌似与篮球的这么个玩意 2.配置环境 点击设置按钮 然后弹出来对话框 对话框中点击设置 然后点击拓展 3.配置域名 找到刚才现在的插件 在里边的Folder里输入你phpstudy_Pro中的www目录即可 他会根据你的文件名自动打开文件 4.成品 ...
Visual Studio Code 导入一个项目在本地启动
热门推荐
weixin_38168728的博客
08-08 1万+
1.打开项目在本地的包 File---Open Floder 2.修改.env.development文件的VUE_APP_API_BASE_URL=//localhost:8001 3.npm install 4.npm run dev 转载于:https://www.cnblogs.com/caoerxuan/p/11320845.html...
visual studio code 编译运行html css js文件的教程
12-20
Visual Studio Code（VSCode）是一款强大的源代码编辑器，由微软开发并开源，支持多种编程语言，包括HTML、CSS和JavaScript。这篇教程将详细介绍如何在VSCode中编译和运行这些文件。 首先，我们来安装必要的扩展以...
实时更新Visual Studio Code工具与浏览器HTML修改同步更新-live-server的使用
最新发布
07-16
此时，Visual Studio Code会自动启动一个本地服务器，并在默认浏览器中打开该文件。 4. 每当你对文件进行修改并保存时，浏览器中的页面会自动刷新。 #### 知识点三：理解localhost与127.0.0.1的区别及端口号的...
如何在visual studio code上运行php文件， 及launch.json中简单变量参数含义，
weixin_41315600的博客
04-30 3726
如何在visual studio code运行php项目 在visual studio code中倒入php项目后，如果想点击运行按钮后，让.php文件 .html文件 .js文件 等文件能在chrome浏览器中运行，需要两个步骤 1.下载debugger for chrome插件 然后配置一下launch.json 文件，让vscode知道怎么运行。 下面是launch.json 文件内容，可以...
vscode 日志文件_Visual Studio Code（VS code）介绍
weixin_39625008的博客
12-19 3620
一.日常安利　VS codeVS vode特点：开源，免费；自定义配置集成git智能提示强大支持各种文件格式(html/jade/css/less/sass/xml)调试功能强大各种方便的快捷键强大的插件扩展对前端这么友好，没理由不用。Visual Studio Code(VScode )官网　：https://code.visualstudio.com/Visual Studio Code(VS...
使用Visual Studio Code编写第一个Vue
柳老师的博客
07-04 3082
在components文件夹下创建:child.vue文件,代码由两部分组成,js和template(也就是html代码)3) index.html 引用main.js,利用其将vue组件加载到页面.在你准备放置项目的地方创建一个文件夹,例如:D:\VSCodeProject。js是由vue框架书写,负责数据和逻辑,template负责内容的呈现.src/App.vue :父组件,引用了HelloWorld.vue。2) src/main.js 将组件加载到页面的一个对象.cd
VScode里像webstorm一样在localhost打开页面的方法
JasonWuuu的博客
02-26 9215
VScode里像webstorm一样在localhost打开页面的方法 今天在vscode里写html引入js和less之后直接打开发现并不能正常显示，还报了Access to XMLHttpRequest at ‘file:///Users/…’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests a...
localhost访问本地html页面慢&localhost 解析为::1 的解决办法
lonelyVM的博客
10-10 2184
自己在用springboot写一个博客的时候，突然有一天项目启动后，html页面访问的速度特别慢。而且浏览器打开本地的html文件都变得很慢啦。 发现 电脑在ping locahost 的时候，对应的不是127.0.0.1的地址，而是ipv6.（localhost 解析为::1）于是按照这个：博客 修改了注册表，也重新设置了一下ipv4和v6的优先级，发现还是不行。 于是换了不同的电脑试试打开本地html文件的速度，发现有一台开了“集装箱”插件的chrome可以正常打开。 自己本地也打开这个插件，确实有用，
Visual Studio发布项目只能使用localhost问题解决
爱软件-从懂得生活开始。
09-05 2585
默认在调试项目的时候,Visual Studio默认配置的是只支持使用localhost进行配置,这样就造成了我们只能使用本机测试,其他人是无法参与测试的,所以为了解决这个问题,我么需要修改一下项目的配置,进入到项目的根目录,找到项目的配置文件,路径为: .vs\WebApplication\config\applicationhost.config 打开配置文件,找到site节点,修改bi...
BUU_crypto刷题记录1
weixin_44617902的博客
10-18 642
目录1.RSA2.RSA13.RSA24.RSA3 1.RSA 打开解压包得到两个如下文件 有（.key）文件说明与rsa模块有关可以用RSA模块直接得出n,e也可以在线解密key文件 网站： http://tool.chacuo.net/cryptrsakeyparse 分解pub.key代码： from Crypto.PublicKey import RSA from numpy import long public = RSA.importKey(open('pub.key').read())
（转）mac上使用http访问本地html
CaseyWei
10-20 803
场景：需要测试一个静态页面不同手机兼容性，需要通过局域网通过http访问mac上的html。
打开chm文件c语言,chm格式,手把手教你chm文件怎么打开
weixin_35805055的博客
05-23 4864
电脑用户在首次接触chm文件的时候一定很抓狂，Unbelievable！其实chm文件是系统帮助文件，细心会发现在许多软件中附带的说明也是chm文件格式，那什么软件可以打开chm呢？下面，小编跟大家带来了打开chm文件的图文。在平时的工作中，我们常常会去下载一些资料，有些资料是.CHM格式的，因此有很多用户不知道CHM文件怎么打开，那么CHM文件怎么打开呢？下面，小编给大家分享打开chm文件的经验...
pc端用localhost:本地IP打开页面
weixin_34185364的博客
04-12 918
2019独角兽企业重金招聘Python工程师标准>>> ...
在Visual Studio Code中html连接MySQL的代码
06-06
在Visual Studio Code中连接MySQL的代码一般需要使用Node.js和相关的MySQL包来实现。以下是一个简单的示例代码： ```javascript const mysql = require('mysql'); // 创建连接 const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: 'password', database: 'test' }); // 连接数据库 connection.connect((err) => { if (err) { console.error('连接失败: ' + err.stack); return; } console.log('连接成功，连接ID为 ' + connection.threadId); }); // 查询数据 connection.query('SELECT * FROM users', (error, results, fields) => { if (error) throw error; console.log('查询结果：', results); }); // 关闭连接 connection.end(); ``` 在上面的示例代码中，我们首先使用`require`方法引入了`mysql`包，并且创建了一个MySQL连接，然后通过`connect`方法连接到数据库。接下来，我们可以使用`query`方法查询数据库，并且通过`end`方法关闭连接。 注意，在使用该代码之前，你需要安装Node.js以及MySQL包。同时，你需要替换代码中的`host`、`user`、`password`和`database`参数为你自己的MySQL连接信息。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值