在Vue CLI 3中，开发过程中常常需要与服务器进行数据交互，这通常涉及到前端与后端API的通信。本文将详细介绍如何使用axios库在vue-cli3项目中获取本地JSON文件，以便于在开发环境中模拟真实的数据请求。
Vue CLI 3是Vue.js官方提供的一个脚手架工具，它提供了一种快速构建Vue应用的模板方式。在Vue CLI 3中，项目的结构相较于Vue CLI 2有所改变，其中公共静态资源文件夹从`static`变为了`public`。这意味着我们不能再像以前那样将JSON文件放在`static`目录下并直接通过URL访问，因为`static`目录下的文件不会被处理或复制到最终的生产构建中。相反，我们需要将JSON文件放入`public`目录，这样它们将在开发服务器上直接可用。
使用axios获取本地JSON文件的过程如下：
1. 确保已经在项目中安装了axios。如果没有，可以通过npm或yarn来安装：
```
npm install axios
或
yarn add axios
```
2. 将你需要的JSON文件（例如：`100000.json`）放入`public`目录下，例如：`public/china-main-city/100000.json`。
3. 在Vue组件中，你可以使用axios的`get`方法来获取这个JSON文件。注意，由于是在本地环境，不能使用`post`方法，因为这会导致404错误。以下是一个示例代码片段：
```javascript
import axios from 'axios';
export default {
data() {
return {
jsonData: null,
};
},
mounted() {
axios.get('./china-main-city/100000.json')
.then((response) => {
this.jsonData = response.data;
console.log(this.jsonData);
})
.catch((error) => {
console.error('Error fetching JSON:', error);
});
},
};
```
在`mounted`生命周期钩子中，我们调用axios的`get`方法，并将成功响应的数据赋值给组件的data属性`jsonData`。
补充知识：在Vue应用中，有时候可能会遇到两个不同的路由加载同一个组件的情况。例如，有多个按钮分别链接到相同的详情页面，但每个按钮对应的内容标题可能不同。在这种情况下，我们可以创建一个通用的组件，并根据路由参数或Vuex状态来动态设置标题。
在`index.js`中配置路由时，可以这样做：
```javascript
import VueRouter from 'vue-router';
import BusinessDetail from './components/BusinessDetail.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/business/detail/:id',
name: 'businessDetail',
component: BusinessDetail,
},
];
export default new VueRouter({
routes,
});
```
在`BusinessDetail`组件中，我们可以监听路由参数的变化，动态更新标题：
```javascript
export default {
// ...
computed: {
pageTitle() {
const id = this.$route.params.id;
// 获取对应的标题，这里只是一个示例，实际可能需要从API获取
let title = `业务详情 - ${id}`;
return title;
},
},
};
```
这样，即使不同的按钮链接到相同的详情页，我们也能根据路由参数设置不同的页面标题。同时，通过使用Vuex管理状态，也可以实现类似的效果，使得组件能够根据全局状态来调整其显示内容。
Vue CLI 3配合axios提供了方便的数据获取手段，同时Vue的组件化特性让我们能够灵活地复用和定制组件，满足各种场景的需求。在开发过程中，理解这些基础知识对于提高开发效率和优化用户体验至关重要。
