vue3 打包 用live server 本地运行 及 插件反向代理配置

最新推荐文章于 2025-10-26 10:49:16 发布
原创 最新推荐文章于 2025-10-26 10:49:16 发布 · 672 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vscode #vue

应用商店安装 live server  

live server 配置反向代理路径 

参考vite config 配置

配置好后 重启vscode 配置才会生效 用live server 打开已经打好包的 html 就可以预览项目了 

callBack_____
关注
vue2学习笔记3 - 开发环境知识补充：live server简介
l_q_l的专栏
07-14 784
Live Server是一款方便的Web开发工具，可以在开发过程中提供实时预览和自动刷新的功能。无需手动刷新网页，开发者可以实时查看对代码的修改，并快速验证效果，但是不能用于部署最终站点。
live-server 配置 proxy 小白踩坑总结
John_Cooper的博客
12-20 7993
项目开发中想使用live-server配置个代理服务免去在本地搭建后台环境，在网上找了很多live-server的文章看过后一直没有配置成功，后来终于找到了问题的根源，以下是配置截图： package.json 项目script 这里配置proxy一定要注意，网上多数文档都没写到 ...
VS Code——Live Server的简介、安装与使用
热门推荐
无限迭代中......
01-07 8万+
基本概念 Live Server：一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。 优点 1：一键安装，实现自动刷新，架设本地服务器环境。 2：比起 gulp 构建 实现自动刷新，架设本地服务器环境，需要安装自动刷新插件...
5分钟上手Live Server：让前端开发效率飙升的实时预览神器
gitblog_00114的博客
10-26 463
Live Server是一款广受欢迎的Visual Studio Code插件，专为前端开发者打造，提供本地开发服务器和实时页面重载功能，让静态与动态网页的开发迭代变得前所未有的流畅。无论是HTML、CSS还是JavaScript文件的修改，都能即时在浏览器中呈现效果，彻底告别手动刷新的繁琐流程。 ## ✨ 为什么选择Live Server？核心优势解析 ### ⚡ 实时预览，告别F5刷新 传...
Vue的使用及运行
李桥桉的博客
06-13 1万+
选中要运行的文件，右键-->【在集成终端中打开】，在终端输入npm run serve 后回车，开发运行，注意vue文件千万不要试图用open with live server打开，此法根本打不开
【技术工具】用VsCode扩展插件Live Server设置服务端代理不用Nginx做服务端代理也能解决跨域问题
讯开技术孵化器博客
03-26 3816
跨域问题 也就是俗称的前端与后端交互需要同源策略，即如下： 域：服务器域名，唯一标识(协议，域名，端口)必须保证一致，说明域相同 跨域：在一个服务器上，去访问另一个服务器上，并且得到另一个服务器返回回来的值，这就是javascript跨域，其实简单点，之前我们做的ajax，都是在同域中访问，现在只是访问的服务器变成了另外的，不是同一台了。仅此而已。但是这样一变，之前的代码就不能用了。 解决跨域有几种方式，其中之一就是搭建代理服务器（nginx），让所访问域名、端口、路径相同。但我这里不想用nginx
vscode配置live-server转发代理
怪只怪满眼尽是人间烟火
06-21 3613
首先安装live-server， 然后点击设置：
live server运行vue文件
02-12
### 如何配置 Live Server 运行 Vue 项目 #### 安装依赖工具 为了使Live Server能够正常工作并运行Vue项目，需先确保已安装必要的工具。对于Vue项目的构建和打包，通常需要Node.js环境以及通过npm或yarn管理的包。 ...
vscode反向代理插件
03-31
`Live Server` 是一款非常流行的实时预览工具，它不仅可以用于启动本地服务器，还可以通过简单的配置实现基本的反向代理需求[^1]。 - 功能特点：支持 HTML 文件的即时刷新和静态资源服务。 - 使用场景：适用于前端...
Vue3+Nuxt3项目部署指南：【官网稳定运行和高效访问保障】
![Vue3+Nuxt3项目部署指南：【官网稳定运行和高效访问保障】]...Nuxt3则是在Vue3基础上进一步优化的框架，它不仅提升了开发者的开发体验，还通过其Server-Side Rendering(S
打包后的前端项目怎么直接运行
最新发布
11-21
Live Server 是 VSCode 的一个轻量级插件，能快速启动本地服务器，无需复杂配置。适合快速测试打包后的项目。 **步骤**: 1. 确保已安装 VSCode（如果未安装，可下载并安装）。 2. 在 VSCode 中安装 Live Server ...
docker从安装到部署vue+springboot前后端分离项目（一站式）
m0_72618563的博客
07-28 1469
docker怎么部署vue3+springboot前后端分离项目？从docker安装到项目部署，本文一站式解决！
VsCode扩展插件LiveServer使用和代理设置
RoadToTheExpert的专栏
04-28 8607
前言： 有时候，要用http来运行一个本地网页，调试ajax, restful, websocket等操作。 尽管有很多IDE如 Eclipse, VisualStudio, PhpStorm 可以实现。但这些工具好像太重型，在一台新电脑上安装也是费时。 还有 php, python, nodejs 等都有 cli、 cgi、第三方库 来启动 http 服务。但这也仅仅是开了web服务器。...
vscode live-server代理服务
sven_chen93的博客
04-06 6051
vscode有许多插件，当我用VS开发时，想代理环境上的代码，并调试开发，中间遇到一些问题，记录下来 在blog上很容易找到需要安装live server，启用内置服务器 第一步下载 第二步点击右下角的Go Live 浏览器打开一个端口为5500的页面，如下图： 但是如何登陆和与后台交互呢，我百度后，找到如下配置 { "liveServer.settings.host": "loca...
Vue 安装 live-server
张营的技术博客
04-25 4850
live-server是轻量级热插拔插件，在开发阶段可以不用刷新浏览器，只用保存了文件，浏览器自动重新加载页面的元素，非常方便。如果没有用vue-cli搭建项目可以直接全局安装live-server方便开发。如果用vue-cli初始化项目，一般会自带hot插件。 1.安装方法 npm install live-server -g 2.运行 在项目根目录运行： live-server 3...
Vue安装live-server
MeiBlog
07-28 2022
安装 npm install live-server -g 启动 live-server 转载注明出处：www.meidanlong.com ????
live-server 本地预览vue打包项目
weixin_45610943的博客
09-06 362
在index.html同级路径下。
VueJS live-server 搭建服务
egbertasd的博客
06-08 486
本地开发常常需要搭建临时的服务，第一时间我们会想到用 http-server。 但现在流行修改文件浏览器自动刷新，这里可以使用 live-server 很简单就能启动一个看起来很专业的本地服务。 你只需要全局安装live-server： npm install -g live-serv 这里是引用 er 并在项目根目录执行这条命令： live-server 然后你什么也不用做，等待一会浏览器就自...
Visual Studio Code之对Live Server插件的使用方法
xs2322050203的博客
02-18 3980
下载插件 打开vscode，点击图中的地方，并在输入框中，输入Live Server，选择最上面的，点击install 进行配置 View->Command Palette… 在搜索框中，输入settings（原本漠然有个>)，选择Open Settings(JSON) 将如下代码放在配置中，默认配置文件中为空 { "liveServer.settings.port"...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值