在Vue.js应用中，有时我们需要从本地加载JSON文件来获取数据，这在开发阶段或处理静态数据时尤其有用。在本文中，我们将详细介绍如何在Vue中读取本地JSON文件。
要实现这一功能，我们需要引入一个外部插件——vue-resource。vue-resource是Vue.js的一个插件，它提供了一个API来发送HTTP请求，包括GET、POST等，使得我们可以方便地从服务器获取数据。在本例中，我们将使用它来读取本地JSON文件。
1. **安装vue-resource**：
确保你的项目是基于Vue CLI创建的，或者已经安装了vue.js。然后打开终端，导航到你的项目根目录，通过npm（Node Package Manager）来安装vue-resource。你可以使用以下命令进行安装：
```bash
npm install vue-resource
```
如果你的网络环境较慢，可以使用淘宝NPM镜像加速：
```bash
npm install vue-resource --registry=https://registry.npm.taobao.org
```
2. **引入vue-resource**：
安装完成后，我们需要在Vue应用的入口文件（通常是`main.js`）中导入并使用vue-resource。在`main.js`中添加以下代码：
```javascript
import VueResource from 'vue-resource'
Vue.use(VueResource)
```
3. **读取本地JSON文件**：
现在，vue-resource已经被正确地引入并启用，我们可以使用它的`$http`接口来获取本地JSON文件。假设你的JSON文件（如`china.json`）位于`static/map/`目录下，你可以按照以下方式读取：
```javascript
this.$http.get('static/map/china.json').then((res) => {
console.log("json数据为:" + res.body)
// 在这里，res.body包含了从JSON文件中获取的数据
// 你可以进一步处理这些数据，例如赋值给Vue实例的data属性
}, (err) => {
console.error("读取JSON文件时发生错误：" + err)
})
```
这里的`this`通常是指Vue实例，确保在Vue实例的方法或生命周期钩子中调用这段代码。`$http.get`方法接收URL作为参数，该URL相对于当前运行Vue应用的HTML文件。当请求成功时，`then`回调会被调用，其中`res`对象包含了响应信息，我们可以通过`res.body`获取到JSON解析后的数据。如果请求失败，`catch`块中的`err`将包含错误信息。
4. **注意事项**：
- JSON文件必须放在项目的`static`目录下，因为Vue CLI或类似的构建工具通常会忽略这个目录，不会将其打包进生产环境中。这意味着在开发阶段和生产环境中，JSON文件都可以通过相对路径直接访问。
- 如果你是在浏览器环境下直接运行未经过构建的Vue应用，确保浏览器的同源策略允许你访问这些本地资源。在某些情况下，你可能需要设置本地服务器来运行你的Vue应用，而不是直接通过`file://`协议打开。
- 对于生产环境，如果你打算从服务器获取数据，而不是本地文件，那么你需要替换`$http.get`的URL，指向你的API服务器。
通过以上步骤，你可以在Vue应用中顺利读取本地JSON文件，获取所需的数据。这种方法在开发早期快速迭代或处理静态数据时非常实用。记得在实际部署时，根据实际情况调整数据来源，以确保应用能够正常工作。
