Vue 安装 live-server

最新推荐文章于 2024-06-06 14:50:50 发布
最新推荐文章于 2024-06-06 14:50:50 发布
阅读量4.6k 收藏 2
点赞数 1
分类专栏： Vue 文章标签： live-server
本文为博主原创文章，未经博主允许不得转载，违者必究。
本文链接：https://blog.csdn.net/zy1281539626/article/details/80082108
版权

live-server是轻量级热插拔插件，在开发阶段可以不用刷新浏览器，只用保存了文件，浏览器自动重新加载页面的元素，非常方便。如果没有用vue-cli搭建项目可以直接全局安装live-server方便开发。如果用vue-cli初始化项目，一般会自带hot插件。

1.安装方法

npm install live-server -g

2.运行

在项目根目录运行：

live-server

3.运行出错解决
如果运行报错 “live-server不是内部或外部命令“,这就说明没有配置环境变量，需要在系统中加入npm的路径，具体路径可以运行npm config ls 查看。

优小U
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
vs-code中用liveServer打开vue-cli打包后的html，模拟查看线上路径问题
zzqz的博客
05-13 4677
首先在扩展搜索liveServer下载安装 之后右键html就会出现liveServer命令 我用的vue-cli版本是3.2，为防止路径问题，在vue.config.js中修改publicPath为 module.exports = { publicPath: "./" } 完成重新打包 在vscode 配置 setting.json 中配置liveServer { "live...
rtsp-server-vue引用示例
10-10
1. 安装`vue-video-player`依赖： ``` npm install vue-video-player --save ``` 2. 在Vue组件中引入并使用： ```javascript import VideoPlayer from 'vue-video-player' require('vue-video-player/src/...
Vue安装live-server
MeiBlog
07-28 1466
安装 npm install live-server -g 启动 live-server 转载注明出处：www.meidanlong.com ????
mac上安装live-server作为web本地部署
最新发布
weixin_37841024的博客
06-06 861
3.在运行目录下，执行live-server。更改live-server默认运行的端口(8080)
Vue笔记整理，让你快速入门Vue.js：02_1.Vue基础：Vue简介、Live Server的安装使用、第一个Vue程序
鲁迷那的专栏—坚持实践后再写出来！
03-21 468
一、前言 上篇文章介绍了本次课程的安排，对于要学的内容已经有了一个初步的认识，接下来就开始学习第一章Vue基础 二、Vue基础-简介 对于vue可能有些小伙伴只是听过它的名字或者只是见过它的logo，所以我们先来认识它吧！看看它的三个特点： 1、JavaScript 框架 vue它是一个 javaScript 框架，相比于jQuery 这样的javaScript 库，框架的功...
Vue下载与live-server安装
lilyshing的博客
06-20 530
live-server可以在本地搭建临时的服务器，并且实现hot socketing（热插拔）即修改文件浏览器自动刷新，还可以自动打开项目。二、全局安装live-server服务器。用npm进行全局安装。
vue本地打包文件 运行 liveServer
qq_38935512的博客
12-15 1515
live-server 是一款 npm 工具，全局安装 npm i -g live-server 后，项目目录使用 live-server 命令行命令便可直接在浏览器中预览（默认找 index.html，其他需要带上文件名空格后跟在后面），并且自动全局监听实时更新。关于live-server配置 可以在setting.json 中去配置 可以百度一下它的属性。
使用live-server快速搭建本地服务器+自动刷新的方法
11-26
在IT行业中，开发和调试网页或前端应用时，快速...同时，配合其他前端框架和工具，如Vue.js、React或Angular，`live-server`可以成为你强大的开发辅助。在日常工作中善用这些工具，可以显著提升开发效率和工作质量。
vue-project-without-cli
03-20
7. **设置开发服务器**：为了在本地进行开发，你可能还需要一个开发服务器，比如`http-server`或`live-server`，或者使用Webpack的DevServer。这需要通过npm安装并配置启动脚本。 8. **处理样式和模板**：Vue支持单...
vue3-webpack-template
03-25
带Webpack的Vue3템플릿版本号安装$ npx degit ParkYoungWoong/vue3-webpack-template USER_DIRECTORY_NAME$ cd USER_DIRECTORY_NAME$ npm run dev眼镜Vue3 Webpack SCSS 巴别塔CSS 自动前缀ESLint （+ ESLint）配套...
nuxt-live-chat-apollo
03-29
实时聊天阿波罗构建设置# install dependencies$ npm install# serve with hot reload at localhost:3000$ npm run dev# build for production and launch server$ npm run build$ npm run start# generate static ...
Asena：Asena，Discord的快速可靠的抽奖和投票机器人！
02-01
:robot_face: 稳定，快速，便捷，并被新一代技术所包围Discord赠品，调查和民意调查机器人！ 多国语言支持 [EN]由于该漫游器在土耳其语服务器上的使用率很高，因此该漫游器的默认语言设置为“土耳其语” 。 您可以使用命令!alocale set <language>更改服务器中机器人的语言。 [TR] Botun育空塞克高头谢蒂尔克sunucularındakullanılmasındandolayıbotunvarsıyılan帝Türkçeolarakayarlanmıştır。 Bolocal sunucuiçerisindeki dilini !alocale set <dil> komutu iledeğiştirebilirsiniz。 使机器人的默认语言为英语的示例： ! alocale set en 命令清单 :mechanical_arm: 前缀：！a（默认） 命令 描述 取消 取消赠品。 创造 在一行中开始新的赠品。 重新滚动 重复赠品的结果。 建立 启动交互式安装向导。 结束 尽早完成赠品。 抽奖 列出服务器
Vue.js快速入门番外篇——Live Server插件的简介、安装与使用
热门推荐
李阿昀的博客
11-03 1万+
简介 Live Server是一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。也就是说我们可以在项目中实时用Live Server作为一个实时服务器实时查看开发的网页或项目效果。 安装 第一步，打开VSCode开发工具，在VSCode扩展中搜索Live Server，然后安装即可。 Live Server插件安装成功之后，应该就是下面这个样子了。 第二步，按Ctrl+Shift+P快捷键打开命令面板，输入settings，然后在下拉列表
live-server服务安装
bossxu_的博客
05-26 6330
我们学习vue1.0的时候 是需要服务的，这儿我们介绍一下借助于liver-server开发学习vue 1.安装node 2.初始化npm:++npm init++ 3.安装live-server:npm install -g live-server 4.安装成功以后启动live-server:live-server 因为npm安装插件是从国外服务器下载，...
vue学习踩坑：VSCode无法执行live-server
StartedatAOP的博客
04-02 3854
在学习vue的时候发现live-server命令无法使用，具体报错如下 解决办法： 1.以管理员身份运行VSCode 2.使用get-ExecutionPolicy查看Power Shell的执行策略，发现为Restricted (单词 Restricted 的意思是 “受限制的”，所以这种执行策略主要是限制脚本的执行。说简单点就是：可以执行单个的命令，但是不能执行脚本) 3.使用set-E...
解决Live Serverv插件无法显示实时预览问题
m0_67471691的博客
05-14 3003
一.问题 1.在Visual Studio Code中下载的Live Serverv实时预览插件往往会根本点击后没有任何反应（一部分机器会有我也是幸运儿之一[哭泣】） 二.解决问题 1.我也去找过很多解决办法，但是又是换IP地址又是在网页中打开后再进行预览（而且每次预览都要进行一次）完全违背了使用它方便实时预览的初衷，所以我想直接换个插件一样的实时预览效果。 Preview on Web Server 和Live Serverv一样的功能直接下载插件即可。 直接找第一个安装即可。 2.
Vue.js
weixin_43999182的博客
05-13 6086
Vue.js 开发模式： CDN NPM 在用 Vue 构建大型应用时推荐使用 NPM 。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件 学习开发工具：Visual Studio Code 工具下载网址：Visual Studio Code下载地址 装好软件后装几个插件： 1、Live Server 为静态和动态页面启动带有实时重新加载功能的开发本地服务器 2、Vetur 用于VS代码的Vue工具 3、V
VueJS live-server 搭建服务
egbertasd的博客
06-08 358
本地开发常常需要搭建临时的服务，第一时间我们会想到用 http-server。 但现在流行修改文件浏览器自动刷新，这里可以使用 live-server 很简单就能启动一个看起来很专业的本地服务。 你只需要全局安装live-server： npm install -g live-serv 这里是引用 er 并在项目根目录执行这条命令： live-server 然后你什么也不用做，等待一会浏览器就自...
【Vue学习笔记】vue-cli-service相关配置说明
weixin_47192515的博客
04-19 4883
vue-cli-service相关配置说明 vue-cli-service： 在脚手架的package.json中，serve配置的是与项目启动相关的信息： --open 在服务器启动时打开浏览器 --copy 在服务器启动时将 URL 复制到剪切版 --mode 指定环境模式 (默认值：development) --host 指定 host (默认值：0.0.0.0) --port 指定 port (默认值：8080) --https 使用 htt
vue右键没有open with live server
08-29
抱歉，但是在Vue项目中，通常没有"右键->Open with Live Server"这个选项。这是因为Vue项目是通过命令行工具来运行和开发的。通常情况下，你需要使用以下步骤来运行Vue项目： 1. 首先，确保你已经安装了Node.js和npm（Node包管理器）。 2. 在命令行中，切换到你的Vue项目的根目录。 3. 运行以下命令来安装项目所需的依赖： ``` npm install ``` 4. 安装完成后，运行以下命令来启动开发服务器： ``` npm run serve ``` 5. 当命令行显示"App running at: http://localhost:8080/"时，表示开发服务器已经成功启动。 6. 打开你的浏览器，并在地址栏中输入http://localhost:8080/，然后按下Enter键。 7. 现在，你应该能够看到你的Vue项目在浏览器中运行了。 所以，为了在Vue项目中运行你的代码，你需要使用命令行来启动开发服务器，而不是使用"右键->Open with Live Server"这个选项。<span class="em">1</span> #### 引用[.reference_title] - *1* [MatadorDeMonstro-Game](https://download.csdn.net/download/weixin_42113794/19207148)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

优小U

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值