前端 | 前端工程化

4.3 定义路由表

• 在src/router/index.js文件中定义路由表

import Vue  'vue'
import VueRouter  'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/emp',  //地址hash
    name: 'emp',
    component:  () => import('../views/tlias/EmpView.vue')  //对应的vue组件
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  },
  {
    path: '/',
    redirect:'/emp' //表示重定向到/emp即可
  }
]

const router = new VueRouter({
  routes
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

4.4 设置路由标签

• 在 View 中设置

<el-menu-item index="1-1">
    <router-link to="/dept">部门管理router-link>
el-menu-item>
<el-menu-item index="1-2">
    <router-link to="/emp">员工管理router-link>
el-menu-item>
1
2
3
4
5
6

• 在 App.vue 中设置

<template>
  <div id="app">
    <router-view>router-view>
  div>
template>

<script>
export default {
  components: { },
  data(){
    return {
      "message":"hello world"
    }
  }
}
script>
<style>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

5. Vue项目打包部署

5.1 前端工程打包

• 通过VS Code的NPM脚本中提供的build按钮

• 打包生成dist目录，可以复制到nginx目录的html文件夹中

5.2 前端工程部署

5.2.1 工具 Nginx

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

• 目录：

5.2.2 部署

• 在conf/nginx.conf文件，修改Nginx的监听端口号：默认80.

• 在网址输入localhost:端口号，跳转到部署网页