Vue脚手架安装,初始化项目,打包并用Tomcat和Nginx部署
off999 2025-02-04 15:29 31 浏览 0 评论
1.创建Vue脚手架
# 1.在本地文件目录创建my-first-vue文件夹,安装vue-cli脚手架:
npm install -g vue-cli
安装过程如下图所示:创建my-first-vue文件夹,在文件夹内打开控制台,输入npm install -g vue-cli
2.初始化一个Vue项目
# 1.执行安装vue脚手架命令后,再初始化创建一个vue项目:
vue init webpack my-first-vue
安装过程如下图所示:创建my-first-vue文件夹,在文件夹内打开控制台,输入vue init webpack my-first-vue
(1)控制台如上图所示,说明vue项目初始化完成,cd my-first-vue进入初始化的项目;
(2)在上篇文章已介绍,开发vue所需的环境安装nodejs,默认你已经安装好,紧接着输入 npm install,安装环境所需js依赖;
3.启动开发环境
# 1.在项目目录中执行如下命令:
vue run dev
用自己喜欢的编辑器打开vue,我比较喜欢用Visual Studio Code打开。
(1)打开vscode ,打开项目文件即可进入,按着快捷键Ctrl+` ,即可打开终端输入npm run dev, 启动项目。 (2)当你打开谷歌浏览器输入http://localhost:8080,即可看见Vue的初始化界面。
4.Vue Cli脚手架项目打包和部署
# 1.在项目根目录中执行如下命令:
vue run build
注意:vue脚手架打包的项目必须在服务器上运行不能直接双击运行
# 2.打包之后当前项目中变化
在打包之后项目中出现dist目录,dist目录就是vue脚手架项目生产目录或者说是直接部署目录(如下图所示:)
# 3.打包后的dist目录,可放入Tomcat(放入bin文件内) 或 Nginx(Nginx/html目录下)中 进行部署.
4.1 将打包后的dist目录放入Tomcat部署
(1)在官网中下载apache-tomcat,版本较新即可,我本次使用的是【apache-tomcat-8.5.68】;
apache-tomcat下载网址:自行百度下载;不想下载的,可关注私信我,我私下发你呦。
(2)在Tomcat部署需要修改vue项目中的一些配置,才可正常访问;、
将config/index.js, ==> dev/build 的assetsPublicPath: '/', 改为assetsPublicPath: './',
将src/router/index.js ==> base: '/my-first-vue/', 然后通过npm run build进行打包
(4)将打包后的dist文件夹内的static文件夹和index.html 放入 【apache-tomcat-8.5.68\webapps\my-first-vue】目录下;
(5)修改
【apache-tomcat-8.5.68\conf\server.xml】apache-tomcat的默认8080端口,改为8090,访问vue页面。
(6)打开
【apache-tomcat-8.5.68\bin\startup.bat】的startup.bat脚本,启动成功后,输入 http://localhost:8090/my-first-vue/index.html#/
4.2 将打包后的dist目录放入Nginx部署
(1)下载Nginx的文件:自行百度下载,【我使用的是 nginx-1.12.2】,可关注私信我,我私下发你呦。
(2)将dist打包文件放入【nginx-1.12.2\html】目录下即可
(3)注意:
配置【nginx-1.12.2\conf\nginx.conf】文件 listen 9000; server_name localhost; root D:\\PersionData\\top-creator\\2021-07-09\\nginx-1.12.2\\html\\dist; (4)配置如下图所示:
双击【nginx-1.12.2\nginx.exe】可执行程序,启动Nginx,打开浏览器输入:localhost:9000/#/
相关推荐
- 放置与召唤破解版(放置与召唤破解版无限)
-
放置与召唤辛弃疾很强,辛弃疾文武双全,物理攻击高,技能伤害大,非常强大。辛弃疾,原字坦夫,后改字幼安,号稼轩,山东东路济南府历城县人。南宋豪放派词人,人称“词中之龙”,与苏轼合称“苏辛”,与李清照并称...
- app下载注册(app下载注册d39qdf7)
-
1,电脑注册:打开QQ登录页面,点击立即注册。2,会弹出一个网页,填写上昵称、密码、手机号码等信息后,点击立即注册,即可注册QQ账号。3,手机注册,打开QQ进入登录页面,点击新用户注册。然后会提示输入...
- 第三方视频播放器哪个软件好
-
风雷影音播放器2.1.0.5风雷影音II独创双播放内核,聚合MPlayer和MPC强大优势功能,全面支持高清影片流畅播放,无需安装第三方软件,采用级联式多层过滤解码,全面提升影片兼容播放。能够完美播放...
- nba2k22安卓版下载(nba2k24苹果版下载免费)
-
①可能是下载的版本与手机系统不匹配,系统运行不了,用户无法进行安装和使用。②可能是网络线路方面的原因,用户在对其进行使用过程中,网络数据出现故障等情况。③软件厂商没有对安卓系统进行开发,导致安卓用户不...
- 手机勒索病毒下载(下载木马病毒)
-
下载抖音极速版是没有病毒的,抖音极速版就跟抖音一样,都是刷视频的一种娱乐软件而且两个软件都是一家公司开发的,抖音极速版刷视频还可以赚金币得现金,每天所赚的金币第二天凌晨系统会自动兑换成现金,很多人下载...
- store软件下载(store软件下载最新版)
-
在OPPO手机里应用商城里头搜索appstore都可以一键下载了,大家写下载的软件或者是APP都要在你手机里的应用商城里头下载,这样里头是没有木马和病毒的而且下载的都是正规的软件和APP,而且安装是...
- qq五笔输入法官方下载(qq五笔输入法手机版官方正式版)
-
打开应用安装目录,打开程序文件在里面再设置一下,让qq拼音为首选输入法,记住切换输入法的切换键,再不行的话从新安装一下即可遇到这种问题可以尝试以下几种办法:1、重装输入法并从重启一下电脑。有些输入法...
- 查找iphone官网入口(查找iphone官网入口的详细指南)
-
查找我的苹果官网入口:http://www.apple.com.cn/并点击页面右上角的技术支持选项。2.选择您要查询的设备比如说您要查询iPhone的话就选择iPhone3.在iPhone的技术支持...
-
- nba比赛直播(nba比赛直播免费观看直播jrs)
-
NBA比赛直播可以在多个渠道观看,包括电视、网络直播和手机应用等。在电视方面,国内的CCTV-5和湖南卫视等频道都有播出NBA比赛的节目;在网络直播方面,腾讯体育、优酷体育、爱奇艺体育等平台都有提供NBA比赛的直播服务;在手机应用方面,NB...
-
2026-01-21 14:03 off999
- 电脑版ps免费安装包(电脑免费安装photoshop)
-
1.在搜索引擎中输入adobe并点击搜索。2.点击adobe官网。3.点击支持并点击下载与安装。4.点击开始免费试用并点击下载。5.打开文件夹并点击打开进行安装即可。6.根据以上步骤即可下载安装ps。...
- cad制图手机版免费(手机cad制图软件中文免费2020年)
-
手机上看CAD图纸的软件有很多,应用商店一搜一大堆,有几个我觉得不错的,CAD迷你看图最早之前用过,安装包小,确实迷你,看一般小的图纸还可以,大了就不太好用,经常会卡。CAD快速看图,软件就像名字一样...
- 七龙珠游戏格斗手机版(七龙珠游戏格斗手机版破解版)
-
龙珠的卡带对打游戏一共有3个;FC的一个:天下第一武道会GBA两个:对决,舞空斗剧补充;SFC游戏超武斗传.已经知道了.....游戏平台为PS2(虽然wii也有点可能...)....里面龙珠系列的游...
- ocr文字识别(ocr文字识别软件)
-
从广义上说,OCR文字识别也算是人工智能技术,随处可见的人脸识别、OCR识别、指纹识别和虹膜识别技术等人工智能,错落应用在各大领域之中,促进当代企业服务向智能化、自动化转型。云脉OCR开发者平台开放人...
- 手机微信网页版登录(微博官网网页版入口)
-
手机微信网页登陆的入口:1、电脑浏览器地址输入wx点qq点com,回车进入微信网页版登录页;2、手机打开登录自己微信,打开扫一扫功能,扫描网页版上的二维码;3、然后手机点击确定,即可成功登录微信网页版...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- python计时 (73)
- python安装路径 (56)
- python类型转换 (93)
- python进度条 (67)
- python吧 (67)
- python的for循环 (65)
- python格式化字符串 (61)
- python静态方法 (57)
- python列表切片 (59)
- python面向对象编程 (60)
- python 代码加密 (65)
- python串口编程 (77)
- python封装 (57)
- python写入txt (66)
- python读取文件夹下所有文件 (59)
- python操作mysql数据库 (66)
- python获取列表的长度 (64)
- python接口 (63)
- python调用函数 (57)
- python多态 (60)
- python匿名函数 (59)
- python打印九九乘法表 (65)
- python赋值 (62)
- python异常 (69)
- python元祖 (57)
