本地vs code 插件 模拟服务器环境调试前端包(live-server 运行dist包,并解决接口跨域问题)

已于 2024-03-07 09:47:45 修改
阅读量336 收藏
点赞数 1
文章标签： 前端
于 2024-03-07 09:46:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43187898/article/details/136524677
版权

1. 安装vscode live-server插件

2. 用vscode单独打开dist

3. 找到vscode右下角的“Go Live”按钮,点击就会执行一个默认端口号为5555web服务

4. 打开setting.json配置live-server端口号代理等属性


  "liveServer.settings.host": "localhost", //域名或IP

  "liveServer.settings.port": 5555,       //默认端口

  "liveServer.settings.wait": 1000,       //刷新频率

  "liveServer.settings.CustomBrowser": "chrome",  //打开到目标浏览器

  "liveServer.settings.ChromeDebuggingAttachment": false, //是否开启ChromeDebug

  "liveServer.settings.proxy": {  //代理设置

      "enable": true, //是否开启代理设置 

      "baseUri": "/stage-api", // 代理的访问根路径，如http://localhost:5555/api

      "proxyUri": "http://193.168.17.11/stage-api" //远程服务端接口

  },

weixin_43187898
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
parcel-plugin-nuke-dist:打包插件以在编译新捆绑包之前擦除dist目录
05-02
包裹插件-nuke-dist 打包插件以在编译新捆绑包之前擦除dist目录 用法 只需将其安装为依赖项，Parcel将负责其余的工作。 npm install parcel-plugin-nuke-dist --save-dev
vue-cli打包后本地运行dist文件中的index.html操作
10-14
主要介绍了vue-cli打包后本地运行dist文件中的index.html操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
两种方案解决vscode浏览器跨域问题
jc15274630894的博客
12-09 3932
跨域问题的解决
vscode-Live Server的使用心得
weixin_30835933的博客
08-06 9039
一，安装Live Server插件（不详细说明了） 二，开启Server（服务） 有四种方式： 在窗口的最底部有Go Live可以点击，一旦点击，就会自动在浏览器中打开HTML文件 在HTML文件中右键，然后点击open live server 快捷键(alt+L, O)打开服务 (alt+L, C)关闭服务 按F1,然后在输入栏中输入Liv...
vscode 两种方式使用live-server本地服务器打开文件，解决跨域问题
qq_43682422的博客
08-04 7049
一、第一种方法下载live-server插件 1.打开vscode扩展商店 搜索并安装live-server插件 2.重启vscode 右键你需要跑在服务器上的文件，点击open with Live Server就行了 以下是已经打开页面的url，可以看到跑在了本地服务器上。 二、第二种方法 npm安装liver-server 1.在vscode中打开命令终端（右键在终端中打开就自动进入那个目录） wind+r cmd打开的集成终端也可以。 然后在命令行输入： npm install live
vscode下关于Live Server的使用
热门推荐
zhouwei_doris的博客
06-07 17万+
一、在vscode扩展中搜索live server，并安装二、打开命令面板，输入settings，点击首选项三、搜索live sever配置项，将左侧需要修改的配置项复制到右侧用户设置并修改四、选择需要浏览的文件，右键开启服务，就可以在浏览器中浏览网页啦...
VS Code -- Live Server
2301_76778596的博客
03-16 2998
Live Server插件用来自动加载热部署前端页面相关的文件（.html/.js/.ts/.css），简单来说就是：快速启动本地服务，自动监听，不需要刷新就能更新内容。有了它之后调试前端页面再也不需要不停地手工去点击浏览器上的刷新按钮。
【技术工具】用VsCode扩展插件Live Server设置服务端代理不用Nginx做服务端代理也能解决跨域问题
讯开技术孵化器博客
03-26 2995
跨域问题 也就是俗称的前端与后端交互需要同源策略，即如下： 域：服务器域名，唯一标识(协议，域名，端口)必须保证一致，说明域相同 跨域：在一个服务器上，去访问另一个服务器上，并且得到另一个服务器返回回来的值，这就是javascript跨域，其实简单点，之前我们做的ajax，都是在同域中访问，现在只是访问的服务器变成了另外的，不是同一台了。仅此而已。但是这样一变，之前的代码就不能用了。 解决跨域有几种方式，其中之一就是搭建代理服务器（nginx），让所访问域名、端口、路径相同。但我这里不想用nginx
vscode live-server代理服务
sven_chen93的博客
04-06 5042
vscode有许多插件，当我用VS开发时，想代理环境上的代码，并调试开发，中间遇到一些问题，记录下来 在blog上很容易找到需要安装live server，启用内置服务器 第一步下载 第二步点击右下角的Go Live 浏览器打开一个端口为5500的页面，如下图： 但是如何登陆和与后台交互呢，我百度后，找到如下配置 { "liveServer.settings.host": "loca...
live-server本地起node服务解决跨域问题
weixin_53474595的博客
07-28 969
在根文件夹新建一个build.js文件（名字可以自定义)此时会在根目录下生成一个package.json文件。执行dev就相当于执行了build.js文件。NPM 全局安装live-server。
VS Code中live server插件相关问题记录
最新发布
2301_80174941的博客
02-22 351
VS Code中live server插件相关问题记录。记录了通过vscode中live server插件打开html文件和直接打开html文件网页内容不同的问题。
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
12-12
npm run dev是开发环境, npm run build是生产环境, 在开发环境完成代码和测试, 之后用生产环境生成代码,执行npm run build 命令后，会生成dist目录，里边包含index.html和static文件夹。 npm run build的时候, 一...
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
12-12
亲测，webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行。 我的vue项目结构如下： 1. 进入该vue项目目录，打开git bash，执行：npm run build(在package.json的scripts配置) 执行成功如下...
vscode Live Server使用
weixin_30849403的博客
11-22 634
vscode 的Live Server插件可以开启本地服务器 转载于:https://www.cnblogs.com/knuzy/p/10001645.html
vscode解决本地浏览器运行项目时的跨域问题-Live server
weixin_46447549的博客
07-05 1891
VSCode我的神！
jQuery ajax读取本地json文件_jQuery请求本地JSON文件，在谷歌浏览器运行时报跨域错误_Vscode使用Live Server
qq_43842093的博客
05-11 3059
json文件 { "first":[ {"name":"张三","sex":"男"}, {"name":"李四","sex":"男"}, {"name":"王武","sex":"男"}, {"name":"李梅","sex":"女"} ] } js 方法一: $.ajax({ url: "ceshi.json",//json文件位置 type: "GET",//请求方式为get dataType: "json
VSCode解决本地浏览器需要跨域问题
qq_26905813的博客
12-15 470
VSCode解决本地浏览器需要跨域问题
使用vscode直接在浏览器运行less出现跨域问题
m0_55557411的博客
06-23 379
使用vscode直接在浏览器运行less出现跨域问题
vue3纯静态页面打包后报跨域问题怎么解决
06-06
如果你使用 Vue CLI 打包纯静态页面，打包后的文件应该是可以直接放到服务器上访问的，不会有跨域问题。如果你的打包文件需要放到本地文件系统中访问，那么你可以通过以下两种方式解决跨域问题： 1. 修改打包配置 在 `vue.config.js` 文件中添加以下配置： ```javascript module.exports = { devServer: { contentBase: './dist', port: 8080, // 允许跨域访问的域名列表 headers: { 'Access-Control-Allow-Origin': '*' } } } ``` 这样打包后的文件就可以通过 `http://localhost:8080` 访问，并且允许跨域访问了。 2. 使用本地服务器 你可以使用 Node.js 搭建一个本地服务器，将打包后的文件放到服务器上访问，这样就不会有跨域问题了。可以使用 `http-server` 这个 npm 包来搭建本地服务器： 首先安装 `http-server`： ```bash npm install -g http-server ``` 然后在打包后的文件夹中运行以下命令启动服务器： ```bash http-server ``` 这样就可以通过 `http://127.0.0.1:8080` 或其他指定的地址来访问打包后的文件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值