vue安装、打包、发布

news2025/4/14 7:29:22

一.安装:

打开cmd命令行依次输入下面命令:

1. npm install -g @vue/cli
2. vue create vue-demo(项目名)
3. 运行项目 npm run serve

二.打包:

在vscode打开终端输入以下命令:

npm run build

打包成功后会生成一个dist文件夹:

三.发布:

发布有多种方式,现在介绍两种:

1.express

打开vscode,新建一个文件夹(例如:vuetest),把打包好的dist文件夹放到vuetest目录下,打开终端,输入以下命令安装express:

npm install express body-parser --save

安装好后创建一个app.js文件,输入:

运行以下命令即发布成功:

node app.js

2.nginx

a.下载nginx

http://nginx.org/en/download.html     ,下载后解压,解压后如下:

b.把打包好的dist文件夹放到html目录下

c.修改nginx配置

打开nginx目录下的、conf文件夹下的nginx.conf文件

进行配置:

d.启动nginx:

有很多种方法启动nginx

(1)直接双击nginx.exe,双击后一个黑色的弹窗一闪而过

(2)打开命令窗口,切换到nginx解压目录下,输入命令 nginx.exe 或者 start nginx ,回车即可

tips:可以在cmd命令窗口输入命令 tasklist /fi "imagename eq nginx.exe" ,出现如下结果说明启动成功

测试,打开浏览器输入localhost, 注意端口号必须要跟nginx上面配置一样

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1391852.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python图像处理【18】边缘检测详解

边缘检测详解 0. 前言1. 图像导数2. LoG/zero-crossing2.1 Marr-Hildteth 算法 3. Canny 与 holistically-nested 算法3.1 Canny 边缘检测3.2 holistically-nested 边缘检测 小结系列链接 0. 前言 边缘是图像中两个区域之间具有相对不同灰级特性的边界,或者说是亮度…

好用的内外网快速传输大文件方法

在信息化时代,数据已经成为各行各业的关键资产,数据的传输和交换方式直接影响着数据价值的体现。在众多场景下,我们需要在不同的网络环境中进行文件传输,如同一个局域网内或者互联网上。这时涉及到内外网的概念。 内外网指的是在不…

PromptCast-时间序列预测的好文推荐

前言 这是关于大语言模型和时间序列预测结合的好文推荐,发现这篇文章,不仅idea不错和代码开源维护的不错,论文也比较详细(可能是顶刊而不是顶会,篇幅大,容易写清楚),并且关于它的Br…

架构篇02-架构设计的历史背景

文章目录 机器语言(1940 年之前)汇编语言(20 世纪 40 年代)高级语言(20 世纪 50 年代)第一次软件危机与结构化程序设计(20 世纪 60 年代~20 世纪 70 年代)第二次软件危机与面向对象&…

什么是防火墙?

目录 什么是防火墙,为什么需要防火墙?防火墙与交换机、路由器对比防火墙和路由器实现安全控制的区别防火墙的发展史1989年至1994年1995年至2004年2005年至今 什么是防火墙,为什么需要防火墙? “防火墙”一词起源于建筑领域&#x…

十一、Qt Poppler打包

《一、QT的前世今生》 《二、QT下载、安装及问题解决(windows系统)》《三、Qt Creator使用》 ​​​ 《四、Qt 的第一个demo-CSDN博客》 《五、带登录窗体的demo》 《六、新建窗体时,几种窗体的区别》 《七、Qt 信号和槽》 《八、Qt C 毕业设计》 《九、Qt …

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK使用相机日志跟踪功能(C++)

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK使用相机日志跟踪功能(C) Baumer工业相机Baumer工业相机NEOAPI SDK和短曝光功能的技术背景Baumer工业相机通过NEOAPI SDK使用相机日志跟踪功能1.引用合适的类文件2.通过NEOAPI SDK使用相机日志跟踪功能3.通…

java绩效考核系统

一、系统介绍 本系统为绩效考核系统,系统分为三大模块:考核设置,绩效考核,系统管理。 可满足小企业对员工进行考核。本系统最大特色是有强大和灵活的权限控制功能,所有菜单,按钮功能均可由管理通过配置来控…

【开源】基于JAVA语言的网上药店系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 药品类型模块2.3 药品档案模块2.4 药品订单模块2.5 药品收藏模块2.6 药品资讯模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 角色表3.2.2 药品表3.2.3 药品订单表3.2.4 药品收藏表3.2.5 药品留言表…

AIOps探索 | 基于大模型构建高效的运维知识及智能问答平台(2)

前面分享了平台对运维效率提升的重要性和挑战以及基于大模型的平台建设解决方案,新来的朋友点这里,一键回看精彩原文。 基于大模型构建高效的运维知识及智能问答平台(1)https://mp.csdn.net/mp_blog/creation/editor/135223109 …

十、Qt 操作PDF文件

《一、QT的前世今生》 《二、QT下载、安装及问题解决(windows系统)》《三、Qt Creator使用》 ​​​ 《四、Qt 的第一个demo-CSDN博客》 《五、带登录窗体的demo》 《六、新建窗体时,几种窗体的区别》 《七、Qt 信号和槽》 《八、Qt C 毕业设计》 《九、Qt …

常见框架漏洞

1.什么是框架 Web框架(Web framework)或者叫做Web应用框架(Web application framework),是用于进行Web开发的一套软件架构。大多数的Web框架提供了一套开发和部署网站的方式。为Web的行为提供了一套支持的方法。使用Web框架,很多的业务逻辑外的功能不需…

使用arcgis pro是类似的控件样式 WPF

1.资源加载 <controls:ProWindow.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><extensions:DesignOnlyResourceDictionary Source"pack://application:,,,/ArcGIS.Desktop.Framework;component\Themes\Default.xaml&quo…

考研机试题收获——高精度进制转换

代码的第一遍真的很重要&#xff0c;在第一次打的时候尽量把问题思考全面&#xff0c;不要漏打少打&#xff0c;尽量不要留bug给之后de。 一、基础方面 一、处理输出的结束问题 scanf和cin默认都不会读取空格 ①scanf()&#xff1a;如果从文件中读取数据&#xff0c;当scanf()…

一机三芯! 中国服务器“销冠”NF5280G7率先支持

近日&#xff0c;国际数据公司&#xff08;IDC&#xff09;数据显示&#xff0c;2023年前三季度&#xff0c;浪潮信息双路2U服务器夺得中国市场服务器全型号的销售冠军。作为浪潮信息双路2U服务器的旗舰产品NF5280G7&#xff0c;在业界率先以创新的系统架构支持三大处理器平台&…

人工智能 | ChatGPT 和文心一言哪个更好用?

github&#xff1a;https://github.com/MichaelBeechan CSDN&#xff1a;https://blog.csdn.net/u011344545 ChatGPT 和文心一言哪个更好用&#xff1f; ChatGPT 和文心一言哪个更好用&#xff1f;方向一&#xff1a;ChatGPT主要优势局限性和挑战如何克服chatGPT的局限性和挑战…

电脑数据找回怎么操作?这4个方法记得收藏!

“我的电脑里由于文件太多了&#xff0c;每次整理的时候总容易误删重要的文件。大家有什么比较好用的电脑数据恢复方法可以分享吗&#xff1f;” 在长期的电脑使用过程中&#xff0c;用户可能会堆积很多各种各样的电脑数据&#xff0c;这些数据可能会比较重要。如果在使用电脑的…

SQL Server 数据类型

文章目录 一、文本类型&#xff08;字母、符号或数字字符的组合&#xff09;二、整数类型三、精确数字类型四、近似数字&#xff08;浮点&#xff09;类型五、日期类型六、货币类型七、位类型八、二进制类型 一、文本类型&#xff08;字母、符号或数字字符的组合&#xff09; 在…

.Net Core项目在linux部署实战 1.sdk下载 2.环境变量配置/ect/profile 3.运行

1)下载.net core sdk https://download.visualstudio.microsoft.com/download/pr/01292c7c-a1ec-4957-90fc-3f6a2a1e5edc/025e84c4d9bd4aeb003d4f07b42e9159/dotnet-sdk-6.0.418-linux-x64.tar.gz 2)配置下环境变量 step1: // 解压到指定目录 mkdir -p $HOME/dotnet &…

【ubuntu】ubuntu 20.04安装docker,使用nginx部署前端项目,nginx.conf文件配置

docker 官网&#xff1a;Install Docker Engine on Ubuntu 一、安装docker 1.将apt升级到最新 sudo apt update2.使用apt安装 docker 和 docker-compose &#xff08;遇到提示输入y&#xff09; sudo apt install docker.io docker-compose3.将当前用户添加到docker用户组 …