前端开发者运行打包后的前端项目的两种方法

已于 2022-02-22 10:47:46 修改
阅读量4.8k 收藏 9
点赞数
文章标签： 前端 vue.js javascript
于 2022-02-18 14:15:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42611074/article/details/123002222
版权

📝目的

打包后的前端项目需要运行在服务器上，在给后端部署前端项目前，前端开发者肯定想先自己运行看看，是否存在什么问题，目前我总结了两种方法运行打包后的前端项目

🔖1.使用vscode插件live server

live-server可以作为一个实时服务器
打开前端项目的html，右击open with live server
在这里插入图片描述

🔖2.使用npm包serve

原理就是使用node起一个服务器来运行前端项目

npm i -g serve

serve -s 压缩文件夹名，一般为dist
永远不会太晚
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2.x+webpack快速搭建前端项目框架详解
08-28
vue2.x+webpack快速搭建前端项目框架详解是当前前端开发领域中非常流行的一种技术栈，本文将详细介绍如何快速搭建基于vue2.x、webpack、vuex、sass+axios、elementUI等技术栈的前端项目框架。 首先，需要安装node...
Vue打包好的dist如何在本地运行
qq_34068440的博客
10-28 2032
方法1:进入dist文件夹，运行 http-server。
前端项目打包之后在本地运行的实现方法
u013896513的博客
03-15 655
一、在bash命令行输入npm install -g serve。二、接着输入serve -s dist。
2024年前端最新vue项目如何打包以及如何变成android、ios应用程序，前端简历项目经验
最新发布
2401_84433570的博客
05-07 973
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
前端打包后生成的dist 或 build目录，如何在本地启动服务运行
AS_TS的博客
02-02 9100
运行，会打包后会产生dist或build目录一般情况下，直接打开dist 或 build 目录下的index.html会在浏览器看到内容。然而发现网页一片空白，打开了控制台，看到一片404的各种找不到资源，或者出现跨域的提示。
1.启动前端项目（命令行）
一直在水些技术小文
08-01 6868
1.用管理员身份运行命令提示符（windows的控制后台）2.进入前端项目安装的文件夹（这是我的文件夹）3.在命令行中输入4.在命令行中输入5.在命令行中输入。
如何运行前端项目
ycfszdaaa的博客
12-06 5349
好了直接上干货。 （是准备记录下来免得我又忘了诶） 安装npm ，command要为install。 借鉴文章：https://www.cnblogs.com/jxcool/p/12514609.html 配置好后，直接点击运行即可。 2.通过终端运行项目 在终端输入 npm run dev，回车即可。 借鉴文章： https://blog.csdn.net/weixin_38441551/article/details/85639658 ...
前端打包好后运行
罗彬桦的博客
08-20 1192
可以在打包好的dist下面运行如下命令： 下载http-server npm install http-server -g 开启 http-server服务 终端进入目标文件夹，然后在终端输入： $ http-server -c-1 （⚠️只输入http-server的话，更新了代码后，页面不会同步更新） Starting up http-server, serving ./ Available on: http://127.0.0.1:8080 http://192....
前端大厂最新面试题-Bytedance.docx
06-06
webpack是前端模块打包工具，可以将多个模块打包成一个文件，以便提高加载速度。loader和plugin是webpack中的两个重要概念，loader用于加载特殊类型的文件，plugin用于执行特殊的任务。 九、Less Less是CSS预处理...
前端大厂最新面试题-sohu.docx
06-06
前端工程师面试知识点总结 作为一名专业的IT行业大师，我将从给定的文件中提取相关知识点，并进行详细的...这些知识点都是前端工程师面试中常见的题目，了解和掌握这些知识点对于前端开发者的职业发展具有重要意义。
前端大厂最新面试题-tool.docx
06-06
npm的安装方式有两种：本地安装和全局安装。本地安装将包安装在当前项目目录下，适合项目中使用的依赖项，而全局安装将包安装在系统目录下，适合命令行工具和开发环境。 package.json package.json有什么作用？...
2021大厂前端核心面试题详解 二1
08-04
在前端开发中，性能优化是一项至关...理解这些基础优化策略和内存管理原理，对于前端开发者来说至关重要，能够有效提升应用程序的性能和用户体验。在实际工作中，结合具体场景灵活运用这些方法，可以解决许多性能问题。
前端框架---react基础
07-16
React 应用的核心是组件，组件可以使用函数或 ES6 类两种方式定义。组件通过接收 props（属性）从父组件接收数据，并可以有自己的状态（state）来管理内部数据变化。 **JSX 语法** JSX 允许在 JavaScript 中书写 ...
vue-cli中打包图片路径错误的解决方法
08-29
本文介绍了vue-cli中打包图片路径错误的解决方法，包括部署到根目录下和部署到子目录下的两种方法。这些方法可以帮助开发者快速解决图片路径错误的问题，提高开发效率和用户体验。 知识点 * Vue-cli是一个流行的...
前端简历模块，前端开发
02-19
这份简历显示了一位精通Vue、Vue3、React等框架的前端开发者的技术能力。以下将详细解析这些知识点： 1. **Vue 2.x**： - **MVVM模式**：Model-View-ViewModel架构模式，是Vue的核心思想，它连接了视图和数据模型...
web前端最新学习路线.pdf
12-04
响应式网页设计（Responsive Web Design）是一种设计方法，旨在使网页能够适应不同设备和屏幕尺寸的显示。响应式网页设计需要了解媒体查询、grid 系统、flexbox 等技术。 Web storage 和安全 Web storage 是一种...
前端：React/Vue项目打包后的代码不部署，怎么在本地运行？
weixin_46721670的博客
10-11 1160
前端：React/Vue项目打包后的代码不部署，怎么在本地运行？
前端 vue 从0开始到运行项目
Johnson_7的博客
05-18 1498
一、安装 首先是前端，使用的是 node.js ，可以去官网下载 ==>传送门 然后点击download： 可以选择左边是长期维护版本，右边是最新版，也可以选择旧版本下载（推荐） 旧版本下载方式：翻到最下面找到 All download options 点击上面的../，进入上一级 往下翻就可以找到以往的版本，这里我用的是16，找到对应的系统点击下载即可 下载后直接安装，安装步骤跳过。。。 然后可以打开win+R，输入node -v，查看版本号v16.14.2，确认是否..
vue项目启动与打包简要总结
BHSZZY的博客
12-07 3819
1.首先，需要安装nodejs，版本需要与其它同事的保持一致，否则可能出现打包报错的情况； 安装msi格式的nodejs，就可以不用手动配置环境变量。2.如果有必要，修改npm下载源为公司内网源（如果允许访问外网，可以找cnpm使用淘宝源的方法） 3.从git上下载完项目后，需要在项目文件夹中打开cmd，使用命令，下载相关依赖包。1.确认项目中的文件，其中有个字段，不同项目可能配置的不一样。 (1)可能是这样配置的： 这样的，是默认配置，可以使用启动项目，使用打包项目。(2)可能是这样配置的： 这样的，就是
springboot框架前后端分离项目
07-23
### 回答1： Spring Boot框架是一种用于构建Java应用程序的开源框架，它通过简化配置和提供强大的自动化工具，使开发者能够快速而轻松地构建可靠的、可扩展的应用程序。 前后端分离项目是指将应用程序的前端和后端部分进行分离，使开发者可以独立地开发和部署这两个部分。在前后端分离项目中，前端通常使用HTML、CSS和JavaScript等技术编写用户界面，而后端则负责处理业务逻辑和数据操作。 使用Spring Boot框架进行前后端分离项目开发有以下几个优势： 1.快速开发：Spring Boot提供了大量的自动化配置和快速启动的特性，使得开发者能够更加快速地搭建项目框架和编写代码。 2.灵活性：前后端分离项目允许前端和后端分别独立开发和部署，使得开发者在技术选择和架构设计上有更大的灵活性。 3.可扩展性：Spring Boot框架提供了大量的插件和扩展，使得开发者可以方便地添加新的功能和模块，从而提高项目的可扩展性。 4.易于维护：前后端分离项目将前端和后端逻辑解耦，并通过API接口进行通信，使得代码结构更加清晰，易于维护和测试。 总之，使用Spring Boot框架进行前后端分离项目开发可以提高开发效率、灵活性和可扩展性，使得开发者能够更加轻松地构建高质量的应用程序。 ### 回答2： Spring Boot框架是一个用于构建独立的、可扩展的Java应用程序的开发框架。它通过提供一组简化的配置和默认的约定来简化应用程序的开发过程。 前后端分离项目是一种架构模式，其中前端和后端是独立的两个应用程序。前端应用程序通常使用HTML、CSS和JavaScript来实现用户界面，后端应用程序负责处理业务逻辑、数据库操作等。 在使用Spring Boot框架进行前后端分离项目开发时，可以采用以下步骤： 1. 前端项目准备：前端团队使用HTML、CSS、JavaScript等技术编写用户界面，并与后端团队协商确定前后端接口的规范。 2. 后端项目准备：后端团队使用Spring Boot框架进行业务逻辑的开发，包括设计数据库模型、编写控制器、服务类等。 3. 接口设计：前后端团队根据需求确定接口规范，包括请求方法、请求参数、响应格式等。 4. 接口实现：后端团队根据接口规范编写接口的实现代码，可以使用Spring Boot提供的注解、工具类等简化开发过程。 5. 前端集成：前端团队根据接口规范使用Ajax或其他技术与后端进行通信，获取数据并展示在用户界面上。 6. 测试与调试：前后端团队进行接口、功能的测试和调试，确保项目正常运行。 7. 部署与发布：完成开发、测试和调试后，前端和后端分别打包为独立的应用程序，并在目标环境中部署和发布。 总的来说，使用Spring Boot框架进行前后端分离项目开发可以提高开发效率，降低团队协作的难度。前后端各自负责自己擅长的领域，通过规范的接口进行沟通和数据交互，实现更灵活、可维护、可扩展的项目。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值