Vue - 打包部署

golemon.

于 2024-10-06 23:04:25 发布

阅读量214

点赞数 2

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_63432403/article/details/142733337

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

vscode找到NPM脚本，点击build。

在这里插入图片描述

目录下出现dist目录则表示安装成功。

在这里插入图片描述

安装Nginxnginx: download

在这里插入图片描述

目录	用途
conf	配置文件目录
html	静态资源文件目录
logs	日志文件目录
temp	临时文件目录

将刚刚打包好的文件放到html目录下。

点击nginx.exe，用localhost:默认端口（8080）进行页面访问。

如果默认端口被占或想要更改，可以点击conf/nginx.conf，将server中的端口进行修改。

若出现之前写的页面内容，那么表示部署成功。

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

golemon.

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue-cli 打包部署

likunpeng6656201的博客

08-20

7506

1、一般打包：直接 npm run build。（webpack的文件，根据不同的命令，执行不同的代码的）注：这种打包的静态文件，只能放在web服务器中的根目录下才能运行。 2、在服务器中非根目录下运行的打包：需要配置参考：https://segmentfault.com/a/1190000014561644 3、在本地文件系统中打开，不需要web服务器暂时不清楚 4、使用 hi...

vue-admin-template打包部署及跳过登录验证

qq_36571947的博客

04-16

2452

1、修改vue.config.js 将publicPath的值改为’./’(设置打包后的静态资源为相对路径,避免加载不到css、js导致页面白屏) outputDir：打包后的文件夹名 assetsDir：打包后的静态资源文件夹名 2、三个文件中的VUE_APP_BASE_API改为自己的请求地址 3、修改登录请求接口 4、注释掉src/main.js中此段代码不使用mock数据，使用自己的接口数据 5、修改util/request.js中的code判断，改为自己后端返回的code 6、如需跳过

参与评论您还未登录，请先登录后发表或查看评论

前端项目vue-admin-template 部署

qq_40596257的博客

03-28

4556

上个文章记录了怎使用vue-admin-template进行二次开发，今天记录下项目开发完了怎样部署在自己的服务器上：新手，我推荐安装宝塔界面，方便今天我们就使用xshell和xftp，首先连接上自己的服务器第一步：下载nginx 然后再nginx官网下载linux版本的nginx，然后上传到服务器上，可以使用xftp拖上去，然后放在随便一个文件夹，或者自己新建一个文件夹，然后解压这就要使用命令来解压了第二步：上传和解压解压命令：　　命令格式：tar -zxvf 压缩文件名.tar

（69）Vue-cli 打包与部署

Java田根旺

02-17

1365

一、打包 • 打包就是将 Vue CLI 项目编译为浏览器可识别的文件。执行命令如下： npm run build 二、部署 • 部署指的是将 Vue 项目dist 目录部署到服务器上。 • 安装静态文件服务器命令： • npm install –g serve • 在 dist 下通过 serve 命令部署。 ...

vue-element-admin 运行并且打包部署

祈澈菇凉

07-14

1万+

vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。推荐指数：star:55k Github 地址：https://github.com/PanJiaChen/vue-element-admin Demo体验：ht...

Vue项目打包部署总结

2301_79098873的博客

05-15

2073

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！

Vue项目打包部署

qq_40259528的博客

07-20

2万+

vue项目部署，使用的是linux centors nginx.遇见的问题及解决方案

ruoyi-vue-pro部署文档

一起coding，一起嗨。

02-22

1万+

ruoyi-vue-pro介绍: 前端采用vue-element-admin，正在支持 Vue 3 + ElementUI Plus 最新方案。后端采用 Spring Boot、MySQL + MyBatis Plus、Redis + Redisson。权限认证使用 Spring Security & Token & Redis，支持多终端、多种用户的认证系统。支持加载动态权限菜单，按钮级别权限控制，本地缓存提升性能。工作流使用 Activiti ，支持动态表单、在线设..

VUE(5) : vue-element-admin[5] : 打包及nginx部署

Lxinccode的博客

08-05

1309

version。

vue-element-admin部署生产环境

热门推荐

CrazyZomble的博客

07-13

2万+

vue-element-admin是一个后台前端解决方案，它基于vue和element-ui实现。通过使用这套模板我们可以快速搭建起完整的后台管理系统。我们跟着官网文档快速建立起开发环境，但是一开始怎么部署到linux的生产环境有点不知所措，这里记录下部署的流程和遇到的问题。 1、打包生成静态文件 # 打包正式环境 npm run build:prod ...

Vue-cli打包后部署到子目录下的路径问题说明

10-14

在使用 Vue CLI 打包应用时，可能会遇到将应用部署到服务器子目录下的情况。本篇文章将详细解析这个问题及其解决方案。首先，当 Vue CLI 打包应用时，默认会生成一个静态资源文件夹，通常命名为 `dist`，这个...

vue-multipage vue 模块化开发打包

11-23

Webpack 是一个模块打包器，它能够将JavaScript、CSS、图片等资源进行模块化处理，然后根据配置将它们打包成一个或多个可部署的静态文件。在Vue-multipage 的场景下，Webpack 被用来处理每个页面的独立模块，确保每...

vue-cli中打包图片路径错误的解决方法

08-29

在使用vue-cli构建项目时，第一次打包部署到服务器上时，可能会出现图片加载不出来的情况。这种情况下，图片无法正常显示，影响了用户体验。解决方法解决这个问题有两种方法：部署到服务器的根目录和部署到服务器...

vue-admin-element+Electron打包exe可执行文件(输出为dist文件夹即可)

04-24

在标题和描述中提到的“vue-admin-element+Electron打包exe可执行文件”，意味着开发者正在尝试将基于Vue.js和Element UI的管理后台应用与Electron结合，打包成Windows平台的.exe可执行文件。这个过程通常是为了将...

knowLedge-Vue I18n 是 Vue.js 的国际化插件

2301_76671906的博客

09-30

937

Vue 2 中使用 Vue I18n 插件实现中英文切换

Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数

2301_77358195的博客

09-30

980

自定义指令

计算机毕业设计基于Python的智能文献管理系统的设计与实现 Python+Django+Vue 前后端分离附源码讲解文档

weixin_19164791635

10-03

1789

本文介绍了一款基于Python的智能文献管理系统，该系统通过自动化的数据爬虫和文本挖掘技术，为用户提供了文献信息的收集、管理和分析服务。系统的主要功能包括用户管理、文献类型管理、文献信息管理、文献注释管理、在线论坛和系统管理等。该系统旨在提高学术文献管理的效率和质量，促进学术资源的共享与交流，对提升学术研究的质量和效率具有重要的价值。

vue-live2d看板娘集成方案设计使用教程

每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。

10-05

1072

vue-live2d看板娘集成方案设计使用教程

如何使用ssm实现基于Java的校园二手物品交易平台的设计与实现+vue