【JavaWeb】Day21.Vue路由和打包部署

Vue路由

介绍： Vue Router 是 Vue 的官方路由。

组成：

• VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
• <router-link>：请求链接组件，浏览器会解析成<a>
• <router-view>：动态视图组件，用来渲染展示与路由路径对应的组件

1.安装 

如果创建Vue项目时已选择，可不用安装

在控制面板上输入命令

npm install vue-router@3.5.1

2.定义路由 

定义路由有两种方式

在根组件中加入<router-view>（动态视图组件）

 

 在其他组件中添加<router-link>（请求链接组件）

打包部署 

打包

部署（Nginx）

• 介绍：Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。
• 官网：nginx news

先到官网下载Nginx安装包

 

 部署：将打包好的 dist 目录下的文件，复制到nginx安装目录的html目录下。

启动：双击 nginx.exe 文件即可，Nginx服务器默认占用 80 端口号。

注意：Nginx默认占用80端口号，如果80端口号被占用，可以在nginx.conf中修改端口号。(netstat –ano | findStr  80)