有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue脚手架安装,初始化项目,打包并用Tomcat和Nginx部署

vue 炮渣日记 3周前 (11-10) 8次浏览 已收录 0个评论 扫描二维码

1.创建Vue脚手架

# 1.在本地文件目录创建my-first-vue文件夹,安装vue-cli脚手架:

npm install -g vue-cli

安装过程如下图所示:创建my-first-vue文件夹,在文件夹内打开控制台,输入npm install -g vue-cli

Vue脚手架安装,初始化项目,打包并用Tomcat和Nginx部署

2.初始化一个Vue项目

# 1.执行安装vue脚手架命令后,再初始化创建一个vue项目:

vue init webpack my-first-vue

安装过程如下图所示:创建my-first-vue文件夹,在文件夹内打开控制台,输入vue init webpack my-first-vue

Vue脚手架安装,初始化项目,打包并用Tomcat和Nginx部署
Vue脚手架安装,初始化项目,打包并用Tomcat和Nginx部署

(1)控制台如上图所示,说明vue项目初始化完成,cd my-first-vue进入初始化的项目;

(2)在上篇文章已介绍,开发vue所需的环境安装nodejs,默认你已经安装好,紧接着输入 npm install,安装环境所需js依赖;

Vue脚手架安装,初始化项目,打包并用Tomcat和Nginx部署

3.启动开发环境

# 1.在项目目录中执行如下命令:

vue run dev

用自己喜欢的编辑器打开vue,我比较喜欢用Visual Studio Code打开。

Vue脚手架安装,初始化项目,打包并用Tomcat和Nginx部署

(1)打开vscode ,打开项目文件即可进入,按着快捷键Ctrl+` ,即可打开终端输入npm run dev, 启动项目。 (2)当你打开谷歌浏览器输入http://localhost:8080,即可看见Vue的初始化界面。

Vue脚手架安装,初始化项目,打包并用Tomcat和Nginx部署

4.Vue Cli脚手架项目打包和部署

# 1.在项目根目录中执行如下命令:

vue run build

注意:vue脚手架打包的项目必须在服务器上运行不能直接双击运行

# 2.打包之后当前项目中变化

在打包之后项目中出现dist目录,dist目录就是vue脚手架项目生产目录或者说是直接部署目录(如下图所示:)

# 3.打包后的dist目录,可放入Tomcat(放入bin文件内) 或 Nginx(Nginx/html目录下)中 进行部署.

Vue脚手架安装,初始化项目,打包并用Tomcat和Nginx部署

4.1 将打包后的dist目录放入Tomcat部署

(1)在官网中下载apache-tomcat,版本较新即可,我本次使用的是【apache-tomcat-8.5.68】;

apache-tomcat下载网址:自行百度下载;不想下载的,可关注私信我,我私下发你呦。

(2)在Tomcat部署需要修改vue项目中的一些配置,才可正常访问;、

将config/index.js, ==> dev/build 的assetsPublicPath: ‘/’, 改为assetsPublicPath: ‘./’,

Vue脚手架安装,初始化项目,打包并用Tomcat和Nginx部署

将src/router/index.js ==> base: ‘/my-first-vue/’, 然后通过npm run build进行打包

Vue脚手架安装,初始化项目,打包并用Tomcat和Nginx部署

(4)将打包后的dist文件夹内的static文件夹和index.html 放入 【apache-tomcat-8.5.68webappsmy-first-vue】目录下;

(5)修改
【apache-tomcat-8.5.68confserver.xml】apache-tomcat的默认8080端口,改为8090,访问vue页面。

(6)打开
【apache-tomcat-8.5.68binstartup.bat】的startup.bat脚本,启动成功后,输入
http://localhost:8090/my-first-vue/index.html#/

Vue脚手架安装,初始化项目,打包并用Tomcat和Nginx部署

4.2 将打包后的dist目录放入Nginx部署

(1)下载Nginx的文件:自行百度下载,【我使用的是 nginx-1.12.2】,可关注私信我,我私下发你呦。

(2)将dist打包文件放入【nginx-1.12.2html】目录下即可

(3)注意:
配置【nginx-1.12.2confnginx.conf】文件 listen 9000; server_name localhost; root D:PersionDatatop-creator2021-07-09nginx-1.12.2htmldist; (4)配置如下图所示:

Vue脚手架安装,初始化项目,打包并用Tomcat和Nginx部署

双击【nginx-1.12.2nginx.exe】可执行程序,启动Nginx,打开浏览器输入:localhost:9000/#/

Vue脚手架安装,初始化项目,打包并用Tomcat和Nginx部署
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址