如何通过live-server部署启动前端工程

最新推荐文章于 2024-06-24 20:05:23 发布
原创 最新推荐文章于 2024-06-24 20:05:23 发布 · 2.1k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#nginx #live-server

本文介绍了如何搭建一个前端门户系统，避免使用单页应用以提高安全性并优化搜索引擎体验。通过创建新工程，导入静态资源，安装并配置live-server实现热部署，最后利用nginx进行反向代理，确保可以通过特定域名访问。详细步骤包括live-server的安装、运行、设置端口，以及nginx的配置和测试。

目录

为什么要搭建门户系统

创建工程

导入静态资源

安装live-server

安装

运行

设置通过域名访问

配置nginx反向代理

测试

 

为什么要搭建门户系统

 

门户系统面向的是用户，安全性很重要，而且搜索引擎对于单页应用并不友好。因此我们的门户系统不再采用与后台系统类似的SPA（单页应用）。

依然是前后端分离，不过前端的页面会使用独立的html，在每个页面中使用vue来做页面渲染。下面就让我们开始搭建吧~

 

创建工程

 

创建一个新的工程：

 

最低0.47元/天 解锁文章
NodeJS | 搭建本地/公网服务器 live-server 的使用与安装
键盘爱好者
01-16 1439
一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。安装 live-server安装方法这里-g代表全局安装，安装完成后，你就可以在任何地方使用命令了。安装后的验证安装完成后，可以在命令行中输入来查看 live-server 的版本号，如果能正常显示版本号，说明安装成功。环境变量问题Node.js 环境变量未配置正确。
静态网页开发神器 live-server
lxd_max的博客
11-13 1130
“ 作为一名后端开发的人员，前后端分离的时候，本机开发就可以使用它。” 静态网页开发神器 live-server。
live-server快速搭建前端服务
牛先森家的博客
07-21 378
快速搭建服务—前端 使用场景 在你写好页面之后，查看打包好的文件 可以实现的功能 搭建临时的服务 修改文件浏览器自动刷新 自动打开项目 你需要做的事情是 npm install -g live-server or 使用yarn来进行安装，特点就是快 不过yarn我之前遇到过很奇怪的问题，具体是怎么解决的，哈哈，当然是用的npm啊 yarn global add live-server 然后在项目根目录执行 live-server --port=8080 然后你就可以看到了 如果你比较懒，可以在pack
前端静态web服务器live-server使用
YanGo的博客
03-11 1037
live-server npm地址：https://www.npmjs.com/package/live-server live-server是一款npm工具，可以实现在本地开发中搭建一个临时静态服务器。虽然现在很多编辑器都有一键启动服务器功能，但是多学一个总归是好的。 1. 安装live-server 在安装live-server前需要先安装好node和npm，这个自行安装。 npm install -g live-server 如果npm安装太慢的话就用cpm install -g live-se
live-server 启动 umi单页应用 刷新页面
Cribug8080的博客
05-07 2289
设置统一入口 live-server --entry-file=/index.html
VSCode创建并运行html页面（使用Live Server插件）
m0_51371779的博客
06-24 3070
打开浏览器，输入网址 http://localhost:【端口号】/【html文件名】.html，我这里是http://localhost:5500/testhtml.html，大家根据自己的端口号和html文件名修改网址。在输入框中输入“xxx.html”，其中xxx是html文件的名字，回车。点击扩展按钮，搜索Live server，点击“安装”按钮。在弹出的窗口中选择刚才新建好的文件夹，点击“选择文件夹”在VSCode中点击“文件”，再点击“打开文件夹”在打开的文件夹中选择“新建文件”按钮。
【技术工具】用VsCode扩展插件Live Server设置服务端代理不用Nginx做服务端代理也能解决跨域问题
讯开技术孵化器博客
03-26 3846
跨域问题 也就是俗称的前端与后端交互需要同源策略，即如下： 域：服务器域名，唯一标识(协议，域名，端口)必须保证一致，说明域相同 跨域：在一个服务器上，去访问另一个服务器上，并且得到另一个服务器返回回来的值，这就是javascript跨域，其实简单点，之前我们做的ajax，都是在同域中访问，现在只是访问的服务器变成了另外的，不是同一台了。仅此而已。但是这样一变，之前的代码就不能用了。 解决跨域有几种方式，其中之一就是搭建代理服务器（nginx），让所访问域名、端口、路径相同。但我这里不想用nginx
使用live-server快速搭建本地服务器+自动刷新的方法
08-27
安装完成后，可以在项目目录下通过执行 `live-server` 命令启动服务器。这将自动打开默认浏览器，并加载当前目录下的 `index.html` 文件。如果不存在 `index.html`，它会尝试其他常见默认文件（如 `index.htm`, `...
前端在Linux服务器搭建node+npm+http-server或者live-server
迎接_成
12-24 2955
前端在Linux搭建服务 先去node官网下载一个Linux二级制包，下载地址https://nodejs.org/zh-cn/download/ 这其中一个，然后上传到Linux服务器 .cd /usr/loacl/node/ （没有目录就自己创建一个目录mkdir /usr/loacl/node/ ） tar -zxvf 解压下载的node-v10.14.2.tar.gz 将上传的文...
win10系统phpstorm改用PowerShell终端
热门推荐
djl的专栏，blog.djl.cx好记
11-10 1万+
习惯了linux的命令行操作， windowns的cmd都不支持，现在好了win10的PowerShell支持了linux命令操作。 文件--》设置--》工具--》Terminal 将Shell path路径改为C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe 保存后重启phpstorm，熟悉的linux命令就可以...
如何启动一个静态的前端工程的服务
luxigaola的博客
04-08 828
在前端开发过程中，可能会要对发布到生产的包做验证或者要本地运行一个开源的包的实例，这时候就需要在本地启动一个前端服务，一般有以下两种方式。
live-server 的使用
乐辞的博客
10-24 6258
live-server 是一款 npm 工具，全局安装 npm i -g live-server 后，项目目录使用 live-server 命令行命令便可直接在浏览器中预览（默认找 index.html，其他需要带上文件名空格后跟在后面），并且自动全局监听实时更新。但现在流行修改文件浏览器自动刷新 hot socketing（热拔插），如 live-reload。本地开发常常需要搭建临时的服务，第一时间我们会想到用 http-server。而 live-server 实现了上面这三个插件的功能。
Visual Studio Code之对Live Server插件的使用方法
xs2322050203的博客
02-18 3982
下载插件 打开vscode，点击图中的地方，并在输入框中，输入Live Server，选择最上面的，点击install 进行配置 View->Command Palette… 在搜索框中，输入settings（原本漠然有个>)，选择Open Settings(JSON) 将如下代码放在配置中，默认配置文件中为空 { "liveServer.settings.port"...
live-server 配置 proxy 小白踩坑总结
John_Cooper的博客
12-20 8000
项目开发中想使用live-server配置个代理服务免去在本地搭建后台环境，在网上找了很多live-server的文章看过后一直没有配置成功，后来终于找到了问题的根源，以下是配置截图： package.json 项目script 这里配置proxy一定要注意，网上多数文档都没写到 ...
vscode配置live-server转发代理的过程
sunhcsss的博客
03-24 2868
步骤： 1.在vscode中设置转发的配置 baseUri为代理时的location proxyUri为要请求要代理的地址 2.重启live-server服务器 关闭之后重新打开，html中的跨域请求就可以正常转发了
VS Code中使用live Server中所涉及的配置问题
wassup博客
06-18 1万+
live server可以实时查看代码更改后的变化。测试十分快速。详细用处可以自行百度。 本文教你live server安装过程中所涉及的方方面面，超级容易上手。安装步骤如下： 目录 一、安装live server 二、配置live server 三、配置后使用live server 一、安装live server 在扩展中搜索 live server，然后点击安装。等待安装完毕进行下一步配置。 二、配置live server 1、安装之后，开始配置live server，在VS.
vsc live server 代理设置
a314753967的博客
09-12 6072
 设置，首选项 { "liveServer.settings.host": "localhost", "liveServer.settings.proxy": { "enable": true, "baseUri": "/", "proxyUri": "http://192.168.0.1:8
intellij html 实时预览,解决intellij idea中使用live edit插件不能在chrome即时显示css变化的方法（html可以）...
weixin_39898248的博客
06-07 1841
问题源于一次chrome内核的更新详细请看就是说chrome在14年一月的时候更新了一次内核，removes getAllStylesheets method from protocol这是原话，这是官方论坛讨论的结果第一条评论就说明了问题所在。解决方法：就是不要使用14年一月更新的chromium内核以上的浏览器。最新版的chrome肯定不行。可以考虑其他使用了chromium内核但版本比较低的...
vue使用live-server和Nginx
最新发布
06-18
<think>我们参考用户的问题：如何在Vue项目中结合使用live-server进行开发和Nginx进行生产部署。根据引用内容，我们可以总结如下：1.开发环境：使用live-server进行实时预览，因为它具有热部署功能，适合开发阶段快速查看效果。2.生产环境：使用Nginx进行部署，因为Nginx可以作为高性能的Web服务器和反向代理，适合生产环境。步骤概述：一、开发阶段使用live-server二、生产阶段使用Nginx部署详细步骤：一、开发阶段使用live-server1.安装Node.js和npm（如果尚未安装）。2.安装live-server：通过npm全局安装live-server。```bashnpminstall-glive-server```3.在Vue项目的根目录下（通常是包含index.html的目录），运行live-server。```bashlive-server--port=9002#可以指定端口，默认是8080```4.此时，live-server会启动一个本地服务器，并自动打开浏览器访问项目。当代码发生变化时，它会自动刷新浏览器。注意：live-server适用于开发阶段，因为它不支持复杂的构建过程，只是简单地托管静态文件。Vue项目通常需要构建（build）步骤，所以在使用live-server之前，需要先构建Vue项目，生成静态文件（dist目录），然后让live-server托管这个dist目录。或者，在开发阶段，我们通常使用Vue自带的开发服务器（如`npmrunserve`），但用户明确要求使用live-server，所以我们按照要求来。然而，在开发过程中，我们更常用的是VueCLI提供的开发服务器（通过`npmrunserve`），因为它支持热模块替换（HMR）等特性。如果用户希望用live-server，那么需要先构建项目，然后托管dist目录。但这样每次修改都要重新构建，效率低。因此，这里我们假设用户是希望用live-server来快速预览构建后的效果，或者用于简单的静态页面开发。二、生产阶段使用Nginx部署1.构建Vue项目：使用`npmrunbuild`生成dist目录（包含静态文件）。2.安装Nginx：根据操作系统不同，安装Nginx（例如在Ubuntu上使用`sudoaptinstallnginx`）。3.配置Nginx：将dist目录设置为Nginx的根目录，或者配置一个虚拟主机。例如，修改Nginx配置文件（通常在`/etc/nginx/sites-available/default`或新建一个配置文件）：```nginxserver{listen80;server_nameyour_domain.com;#如果没有域名，可以用IP或者localhostroot/path/to/your/vue-project/dist;#替换为你的dist目录的绝对路径indexindex.html;location/{try_files$uri$uri//index.html;}}```4.重启Nginx：使配置生效。```bashsudosystemctlrestartnginx```5.如果需要配置SSL证书（HTTPS），可以参考引用[4]中的步骤。三、结合使用实际上，live-server和Nginx分别用于不同的环境：-开发环境：可以使用live-server（但更推荐VueCLI自带的服务器，因为支持HMR）或者用于快速预览构建后的静态文件。-生产环境：使用Nginx部署。所以，在开发时，我们通常不会同时使用两者。但用户可能希望开发时用live-server，而生产时用Nginx。因此，我们可以这样安排：-开发阶段：编写代码，然后使用VueCLI构建（`npmrunbuild`），再用live-server预览dist目录下的文件（或者使用VueCLI的开发服务器）。-生产阶段：将dist目录部署到Nginx服务器。注意：如果用户希望在开发阶段也能实时预览并自动刷新，且不需要每次手动构建，那么应该使用VueCLI的开发服务器（`npmrunserve`），而不是live-server。因为Vue项目通常需要webpack等构建工具，而live-server只是一个简单的静态服务器。因此，我们建议：-开发阶段：使用`npmrunserve`（VueCLI项目默认命令）启动开发服务器，它支持热更新。-当需要模拟生产环境时，可以构建项目（`npmrunbuild`），然后使用live-server（或者Nginx本地配置）来预览构建后的效果，检查是否有问题。-生产阶段：使用Nginx部署dist目录。但是，用户的问题明确要求结合使用live-server和Nginx，所以我们按照要求提供方法。具体步骤（开发阶段使用live-server，生产阶段使用Nginx）：1.开发阶段：a.编写Vue代码。b.构建项目：`npmrunbuild`（注意：这会在dist目录生成静态文件）。c.进入dist目录，运行live-server：`live-server--port=9002`（或者直接在项目根目录运行`live-server./dist--port=9002`）。这样，每次修改代码后，都需要重新构建，然后live-server会自动刷新。2.生产阶段：a.将构建好的dist目录上传到服务器。b.在服务器上配置Nginx，指向该dist目录。c.启动Nginx。优化开发流程：如果觉得每次修改都要构建很麻烦，可以使用VueCLI的开发服务器（`npmrunserve`）进行开发，然后在需要时构建并用live-server预览构建结果。或者，使用live-server的同时，可以搭配文件监视工具，当文件变化时自动构建，例如使用`npm-watch`或`nodemon`。例如，可以安装nodemon：```bashnpminstall-gnodemon```然后，配置一个命令来监视文件变化并自动构建，然后启动live-server。但这样配置比较复杂，通常不如直接使用VueCLI的开发服务器方便。总结：在Vue项目中，开发阶段推荐使用VueCLI自带的开发服务器（`npmrunserve`），生产部署使用Nginx。如果用户坚持在开发阶段使用live-server，那么需要每次修改后手动构建，或者配置自动构建工具。根据引用[2]和[4]，我们可以知道live-server和Nginx的安装和基本使用方法。引用[2]中提到了使用live-server启动前端工程，并配置Nginx反向代理。引用[4]详细介绍了Vue项目部署到服务器（包括Nginx配置）的步骤。因此，我们给出两种环境的配置方法，并强调它们的分工。相关问题：1.如何在Vue开发阶段实现热更新？2.Nginx配置中如何处理Vue路由的history模式？3.如何配置Nginx的SSL证书以实现HTTPS？4.live-server和webpack-dev-server有什么区别？5.如何优化Vue项目的构建速度？</think>### 在 Vue 项目中结合使用 live-server 和 Nginx 的方案 #### 一、开发环境：使用 live-server 实时预览 1. **安装 live-server** 通过 npm 全局安装： ```bash npm install -g live-server ``` 2. **构建 Vue 项目** 生成静态文件到 `dist` 目录： ```bash npm run build ``` 3. **启动 live-server** 在 `dist` 目录下运行： ```bash live-server --port=9002 # 指定端口 ``` - 实时热更新：修改代码后重新 `build`，浏览器自动刷新[^2] - 访问地址：`http://localhost:9002` #### 二、生产环境：使用 Nginx 部署 1. **Nginx 基础配置** 修改 `/etc/nginx/nginx.conf`： ```nginx server { listen 80; server_name your-domain.com; # 替换为实际域名 root /path/to/vue-project/dist; # 指向 build 后的目录 index index.html; location / { try_files $uri $uri/ /index.html; # 支持 Vue Router history 模式 proxy_set_header Host $host; } } ``` 2. **启用配置并重启** ```bash sudo nginx -t # 检查配置 sudo nginx -s reload # 重启生效 ``` 3. **域名访问配置** - **本地 Hosts**：`127.0.0.1 your-domain.com` - **服务器 DNS**：绑定公网 IP 到域名 访问：`http://your-domain.com`[^2][^4] #### 三、关键结合点：工作流衔接 1. **开发阶段优化** ```bash # 监听文件变化自动构建（需安装 chokidar） chokidar "src/**/*" -c "npm run build" & live-server --port=9002 ``` 2. **生产环境增强** - **HTTPS 配置**：添加 SSL 证书[^4] - **性能优化**： ```nginx gzip on; # 启用压缩 expires 7d; # 静态资源缓存 ``` #### 四、对比总结 | **工具** | **适用场景** | **优势** | |----------------|-------------------|----------------------------------| | live-server | 本地开发 | 轻量级、实时刷新、零配置 | | Nginx | 生产部署 | 高性能、负载均衡、安全加固 | > **典型工作流**：开发时用 live-server 快速迭代 → 构建生产包 → 通过 Nginx 部署上线[^2][^4] --- ### 相关问题 1. 如何配置 Nginx 实现 Vue 项目的负载均衡？[^3] 2. live-server 能否直接支持 Vue 的热模块替换（HMR）？ 3. 生产环境中如何优化 Vue 项目的首次加载速度？[^4] 4. Nginx 反向代理时如何处理跨域问题？ 5. 如何为 Nginx 部署的 Vue 项目添加 HTTPS 支持？[^4] [^1]: Node.js 和 Vue CLI 安装步骤 [^2]: live-server 的安装与域名配置 [^3]: Nginx 负载均衡配置方法 [^4]: Vue 项目部署到服务器的详细流程 [^5]: Nginx 路由配置实践
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值