vue项目中直接在前台打包看效果

最新推荐文章于 2025-06-13 20:32:27 发布
最新推荐文章于 2025-06-13 20:32:27 发布
阅读量1.1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 打包 文章标签： vue 打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42580704/article/details/83054743
本文详细介绍了一个典型的前端项目从安装依赖、构建、打包到部署的全过程。包括使用npminstall进行依赖安装，npmrunbuild进行项目打包，以及通过servedist启动本地服务器预览部署效果。适用于希望了解或优化前端部署流程的开发者。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.npm install -g serve
2. npm run build 打包
3. serve dist
4.然后会出现下面的绿色方框，在地址栏输入下面的地址就可以了

vue3前端架构---打包配置
qq_29579625的博客
01-20 3238
VUE前端架构中，打包配置优化是其中比较重要的一个步骤，vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载，进行打包配置优化。
vue项目Intellij IDEA上前端打包
12-16 1万+
Intellij IDEA搭建vue-cli项目，VUE前后端分离项目的打包、发布，vue项目开发环境搭建
Vue使用npm打包前台项目到Nginx
2201_75785454的博客
05-21 3849
Vue使用npm打包部署到Nginx
vue前端项目打包和部署
最新发布
z_y_j229970438的博客
06-13 1502
1.在项目终端使用npm run build命令进行打包，打包完成后我们会在左边的项目文件夹中得到dist文件夹，找到这个文件夹的位置，后续我们会用到。在打包前要将node_modules文件夹删除，否则你打包后的dist文件会非常大。前端和后端开发人员开发好后，要将前端项目和后端项目分别打包部署在前端服务器和后端服务器上。点击保存后，在nginx文件夹里面通过cmd命令进入终端输入nginx -s reload命令。将打包的前端项目文件夹复制到nginx文件夹里面，复制dist文件夹的路径，后面会用到。
【打包vue前端项目】
m0_45991266的博客
06-29 1万+
实例项目是使用vue3+vite。对于vue项目进行打包,npm run build
前端项目的打包发布
weixin_53945110的博客
06-16 1万+
命令: npm run build 作用：用vue-cli内部集成的webpack，把 .vue, .less, .js 等打包成浏览器可直接执行的代码。
Vue前端项目运行指南(v1)
软件攻城狮
05-25 530
Vue前端项目运行指南(v1) 运行指南 1、安装nodejs 访问 https://nodejs.org/en/ 下载稳定版 1.1 打开控制台 输入 node -v 查看node的版本，若出现相应的版本号说明你安装成功了 1.2 npm包管理器，是集成在node中的，所以安装了node也就有了npm,直接输入 npm -v 命令，显示npm的版本信息。 2、 设置npm 来源为 淘宝 不要用cnpm 控制台输入命令 npm config set regi...
Vue 2.0在IE11中打开项目页面空白的问题解决
08-29
Vue 2.0在IE11中打开项目页面空白的问题解决 Vue 2.0是一个流行的前端框架，然而在IE11中打开项目页面时，可能会出现空白的问题。这个问题的出现是因为Babel默认只转换新的JavaScript句法（syntax），而不转换新的...
vue打包android
qzh88888888的博客
10-19 1010
命令执行完后，如果成功，在android-app\platforms\android\app\build\outputs\apk\debug目录下会生成app-debug.apk安装文件。Android版本的安装，我这里选择8.0，因为我接下来安装的cordova也是8.0,笔者在安装其他版本踩过大坑，我建议刚学习的伙伴尽量按照我的方式走，可以避坑。今天配置vue android打包环境足足花了我6个小时，终于弄好了，在此记录一下，期间的曲折整过的伙伴们应该知道，如果用二个字形容：“崩溃”
Vue前端项目部署IIS的实现
10-15
在现代Web开发中，Vue.js是一个非常流行的前端框架，用于构建用户界面。然而，为了让非开发人员能够方便地访问和展示基于...希望这个教程对你在部署Vue项目到IIS的过程中有所帮助，记得持续学习和探索更多Web开发技巧。
基于Vue3+ElementPlus+Pinia+Vite+Axios的智慧社区前台管理界面源码+项目说明.zip
04-10
基于Vue3+ElementPlus+Pinia+Vite+Axios的智慧社区前台管理界面源码+项目说明.zip ## 介绍 - 基于 Vue3、TypeScript、Element Plus、Vue Router、Pinia、Axios、Vite 等开发的后台管理系统模版 ## 安装 注意：需...
前端打包zip
11-12
前端用于打包文件和图片的JS插件，用前端打包文件可以减轻服务器端的压力，免去服务器端生成压缩包，再下载，后删除的繁琐过程和服务器压力
若依前后台分离vue版,前台使用echarts动态调用后台数据
qiang928的博客
08-23 7758
d一、前台vue代码 在首页index.vue中添加 <el-row style="width: 100%; font-weight: bold; top: 10px;" :gutter="10" :sm="24" :lg="24" type="flex"> <el-col :xs="18" :sm="18"> <div class="chart-wrapper"> <bar-chart /> </..
前后台打包
oMangGuoBuDing1的专栏
08-25 550
vue打包关键：单独设置两个command 命令分别执行安装和打包，否则安装警告后打包命令就不执行了，具体看截图（折磨半天，网上找了半天还是自己想的笨办法好用） 原理过程是 从git上下载源码，然后根据配置的命令打包 java springboot 打包需要指定pom位置middleware/pom.xml vue打包是指定打包文件，指定打包命令，命令如下： 更新阿里源：npm config set registry https://registry.npm.taobao.org/ 检查是否更新.
前端项目打包
qq_55061257的博客
03-31 8567
前端项目打包
前端项目打包并部署
热门推荐
喵酱
04-12 1万+
在当前项目路径下，执行命令在当前项目路径下，生成 一个dist文件夹。将来部署项目，是部署的dist这个文件。
2024年前端最新vue项目如何打包以及如何变成android、ios应用程序，前端简历项目经验
2401_84433570的博客
05-07 1795
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
Linux 安装配置nginx 以及前台vue打包部署
LingChenDzd的博客
06-23 853
找到.env.development 和.env.production 改成服务器地址和端口号。直接可以使用xftp把打包完成的dist文件夹里面的内容拉到Linux nginx容器html文件夹下。使用xftp找到/etc/docker/daemon.json文件写入配置。# 将容器nginx.conf文件复制到宿主机。# 将容器conf.d文件夹下内容复制到宿主机。进入vue项目找到vue.config.js。# 将容器中的html文件夹复制到宿主机。项目出现dist文件夹就说明打包完成。
前后台分离打包部署项目（热）
海角12138的博客
08-13 791
前后台分离的项目:项目演示地址：https://github.com/haijiao12138/houyuanbo.niua.git 一：前台打包部署到服务器： 改动api.js，在api.js中定义baseUrl，映射后台的请求地址；在前台vue中也要写入对应的请求头： BaseUrl中的ip地址是自己服务器的地址，后面的8080端口是映射后台的端口； 普通的前台文件中加入请求头： 前台进入easy-backend-ui>文件下使用npm run build命令打包前台文件，会..
Vue自行车租赁前台项目源码详细解读
该源码项目是基于Vue.js框架构建的自行车租赁前台界面。Vue.js是一个用于构建用户界面的渐进式JavaScript框架，它能够帮助开发者高效地构建交互式的单页应用（SPA）。Vue的核心库只关注视图层，易于上手，也支持与第...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值