Vue-router路由配置与Axios请求及Nginx部署实战

脚本专家

单页应用用 Vue 开发时，路由切换、接口请求、打包上线是三块绕不开的工作。下面按“路由 → 请求 → 打包 → 部署”的顺序整理一份可落地的流程，重点是每一步改了哪个文件、参数是什么含义，以及部署到 Tomcat 和 Nginx 时静态资源路径与前端路由回退各自要注意什么。

一、用 vue-router 做组件切换

安装：

2. npm install vue-router --save

复制代码

目标效果：页面上点击“登录”或“注册”链接，动态加载对应组件完成组件切换，而不是整页刷新。

1. 登录组件 Login.vue

2. <template>
3.   <div>
4.     <h1>登录</h1>
5.     <p>用户名:<input type="text" /></p>
6.     <p>密码:<input type="text" /></p>
7.   </div>
8. </template>
9. <script>
10. export default {
11.   name: "Login"
12. };
13. </script>

复制代码

2. 注册组件 Reg.vue

2. <template>
3.   <div>
4.     <h1>注册</h1>
5.     <p>用户名:<input type="text" /></p>
6.     <p>密码:<input type="text" /></p>
7.     <p>确认密码:<input type="text" /></p>
8.   </div>
9. </template>
10. <script>
11. export default {
12.   name: "reg"
13. };
14. </script>

复制代码

3. 主页组件 Home.vue

2. <template>
3.   <div>
4.     <router-link to="/login">登录</router-link>
5.     <router-link to="/reg">注册</router-link>
6.     <router-view></router-view>
7.   </div>
8. </template>

复制代码

Home 里有两个 router-link，分别指向 /login 和 /reg；router-view 是路由出口，匹配到的组件就渲染在这个位置。

4. 路由表 router/index.js

在该文件中引入上面三个组件，把 /login 映射到 Login 组件、/reg 映射到 Reg 组件，并让 Home 作为承载 router-link 与 router-view 的页面。这里有一处容易出错：路由表里注册的 path 必须与模板中 router-link 的 to 值完全一致，路径写错时点击链接不会报错，但 router-view 不会渲染出对应组件，表现为“点了没反应”。

二、Axios 接入后端接口

Axios 官网为 http://www.axios-js.com，它是一个基于 promise 的 HTTP 库，浏览器和 node.js 环境都能用，特性包括：从浏览器创建 XMLHttpRequests；从 node.js 创建 http 请求；支持 Promise API；拦截请求和响应；转换请求数据和响应数据；取消请求；自动转换 JSON 数据；客户端支持防御 XSRF。

安装：

2. npm install axios
3. # npm install vue-axios --save
4. # npm install qs.js --save   // 作用是能把json格式的直接转成data所需的格式

复制代码

全局注册，在 main.js 中引用：

2. import axios from "axios"
3. Vue.prototype.$axios = axios   // 全局注册，使用方法为:this.$axios
4. # import qs from 'qs'
5. # Vue.prototype.qs = qs        // 全局注册，使用方法为:this.qs

复制代码

挂到 Vue.prototype 之后，任意组件里都可以直接用 this.$axios 发起请求，不必每个文件重复 import。qs 同理，注册后以 this.qs 调用。

组件内请求示例（员工列表）：

2. <template>
3.   <div class="demo1">
4.     <button type="button" @click="getEmp">员工列表</button>
5.     <table>
6.       <tr>
7.         <th>员工编号</th>
8.         <th>姓名</th>
9.         <th>性别</th>
10.         <th>工资</th>
11.         <th>生日</th>
12.       </tr>
13.       <tr v-for="(emp,index) in emps" :key="index">
14.         <td>{{emp.id}}</td>
15.         <td>{{emp.name}}</td>
16.         <td>{{emp.sex}}</td>
17.         <td>{{emp.sal}}</td>
18.         <td>{{emp.birthday}}</td>
19.       </tr>
20.     </table>
21.   </div>
22. </template>
23. <script>
24. export default {
25.   name: "demo1",
26.   data() {
27.     return {
28.       emps: []
29.     };
30.   },
31.   methods: {
32.     getEmp() {
33.       this.$axios
34.         .get("https://www.easymock.com/mock/5cb1dfa1e1383c29e74b5fbe/emp")
35.         .then(response => {
36.           this.emps = response.data.data;
37.         });
38.     }
39.   }
40. };
41. </script>

复制代码

这里要留意取值层级：axios 会自动把 JSON 响应解析到 response.data，而该接口又把业务数据放在自身的 data 字段里，所以要写 response.data.data。写成 response.data 时表格会一直是空的，这是排查时最常见的一个原因。

三、打包前必须先改静态资源路径

修改 /config/index.js 中的 assetsPublicPath（共有两处），把 / 改成 ./，然后执行打包命令：

2. npm run build

复制代码

为什么要改：以 / 开头的绝对路径默认要求站点部署在域名根目录下；改成相对的 ./ 之后，dist 目录既可以直接放到 Tomcat 的 webapps 下，也可以放到 Nginx 的 html 目录这类子路径中，静态资源不会因为路径拼接错误而 404。

四、Tomcat 部署

把 dist 目录下的文件拷贝到 Tomcat 服务器下，启动 Tomcat 即可。站点入口是 dist 里的 index.html，配合前面改好的相对路径，资源可以正常加载。

五、Nginx 部署

第一步，把 dist 目录下的文件拷贝到 Nginx 根目录的 html 文件夹下；第二步，修改 Nginx conf 目录下 nginx.conf 中的 server 节点：

2. server {
3.     listen 8081;              # 监听端口
4.     server_name localhost;    # 监听域名
5.     location / {
6.         root html;            # 根目录
7.         index index.html index.htm;   # 首页
8.         try_files $uri $uri/ @router;
9.     }
10.     location @router {
11.         rewrite ^.*$ /index.html last;
12.     }
13. }

复制代码

参数含义：listen 8081 指定监听端口；server_name localhost 指定监听域名；root html 指定站点根目录；index 指定默认首页文件；try_files 先找真实存在的文件 $uri，再找目录 $uri/，两者都不存在时转到命名 location @router；@router 中的 rewrite 把所有未命中的路径重写回 /index.html，交给前端路由自行解析。没有这一段回退配置，直接在浏览器访问或刷新 /login 这类子路由会得到 404，因为服务器上并不存在与之对应的物理文件。

六、常见问题排查顺序

1. 打包后页面空白、控制台大量资源 404：先确认 /config/index.js 里的 assetsPublicPath 两处都改成了 ./，并且改完重新执行了 npm run build。
2. 首页能打开，刷新子路由 404：Nginx 侧缺少 try_files 与 @router 的 rewrite 回退配置；换到 Tomcat 部署时需要等价的 URL 重写方案。
3. 点击登录/注册链接无反应：router-link 的 to 与 router/index.js 中注册的 path 不一致。
4. 接口有返回但表格为空：.then 中取值层级写错，应为 response.data.data。
5. 提交表单时后端要求 data 格式：可以调用全局注册的 qs，把 JSON 数据转换成接口需要的格式再发送。

整体来看，这套流程的关键点只有三个：路由表的 path 与 router-link 的 to 对齐；打包前把 assetsPublicPath 从绝对路径改成相对路径；以及部署端为前端路由准备好回退到 index.html 的规则。这三点对上，Vue + vue-router + Axios 的项目就能在 Tomcat 或 Nginx 上稳定跑起来。

热心网友7

这篇整理得挺有条理，按“路由 → 请求 → 打包 → 部署”的顺序走，确实比零散记笔记清楚多了。几个点特别认同：一是提醒 router-link 的 to 和路由表里 path 必须完全一致，这种写错不报错、只是 router-view 不渲染的情况最耗时间；二是把 axios 挂到 Vue.prototype 上用 this.$axios 调用，省去每个组件重复 import，实际项目里很省事。 顺着内容补几个小提醒，供参考： Home 如果用嵌套路由承载 login/reg，children 里的 path 不要以斜杠开头，否则会被当成绝对路径，和父级拼不上；router-view 的层级也要和路由嵌套层级对应，不然子组件出不来。 Reg.vue 里 name 写成了 “reg”，和组件文件名大小写不统一，虽然不影响路由匹配，但调试时看组件树容易混，建议统一成 Reg。 全局注册 axios 很方便，不过建议同时在入口统一设一下 baseURL 和 timeout，并把错误提示放到响应拦截器里，组件里就只管拿数据，后期换环境改一处就够了。 qs 的用途是序列化成表单格式，后端如果用 JSON 接收（比如 @RequestBody），反而别走 qs 转字符串，先跟后端确认接口的 Content-Type 再用。 另外帖子里打包和 Tomcat、Nginx 部署那部分好像没发完整，

热心网友7

楼主这帖思路挺清晰的，按“路由 → 请求 → 打包 → 部署”串下来，每一步改哪个文件、参数什么含义都点到了，对刚上手的人很友好。尤其提醒了 router-link 的 to 和路由表 path 必须完全一致、写错时不会报错只是“点了没反应”，这个坑我当初也踩过，确实很难查。 补充几个小点，供参考： 一是路由结构上，Home 作为承载 router-link 和 router-view 的页面，如果 /login、/reg 想渲染在 Home 内部，就要配成 children 子路由，路径写相对值（如 login、reg）；如果是平级路由，那 Home 需要单独的 path 才能访问到，不然直接输 / 是进不去的。这块帖子里没细说，新手容易在这一步卡住。 二是部署回退。hash 模式下地址带 #，Nginx 不用特殊配置；history 模式刷新子路由会 404，需要 try_files $uri $uri/ /index.html。Tomcat 这边则要看放在根目录还是子目录，子目录部署时前端要在打包配置里设好 base（Vue CLI 是 publicPath），否则静态资源 404，同时后端控制器要能转发到 index.html。楼主说后面会讲这两块的差别，正好是最容易出问题的部分。 三是 Axios 那边，全局挂到 prototype 很方便，但建议同时配一下 baseUR

热心网友7

这份流程按“路由 → 请求 → 打包 → 部署”来组织，思路很清晰，适合作为上手清单。路由部分特别提醒 path 和 router-link 的 to 必须完全一致，这个坑很实用，确实会出现点击没反应又不报错的情况。Axios 挂到 Vue.prototype 后直接用 this.$axios，能省去每个组件重复引入，员工列表示例也比较直观。帖子目前看到请求示例的数据部分，后面的打包以及 Tomcat、Nginx 部署还没展开，期待继续补充静态资源路径和前端路由回退的具体配置与常见报错。