这篇文章主要介绍了如何配置本地静态文件的 mock 数据的方式。

vue/cli 3.0 与 2.0 的一些不同：

1
2
3.0 移除了 static 文件目录，新增了 public 目录，这个目录下的静态资源不会经过 webpack 的处理，会被直接拷贝，所以我们能够直接访问到该目录下的资源。
3.0 移除了 config、build 等配置目录，如果需要进行相关配置我们需要在根目录下创建 vue.config.js 进行配置即可。

2.0 mock 配置

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
28
// 2.0这个版本是只有 static 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下。

// 静态数据存放的位置
static/mock/home.json

// 启动项目之后一般项目会启动在 8080 端口，如果不是修改下对应端口号即可，直接访问下面地址：
http://localhost:8080/static/mock/index.json

// 可以看到我们的数据是可以请求到的，之后只需要在项目中 config/index.js 添加如下属性：

dev: {
    // Paths fiddler charles
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': '/static/mock'
        }
      }
    }
}

// 之后在项目中使用即可
axios
 .get('/api/index.json')
 .then(this.handler)

3.0 mock 配置

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
28
// 因为vue3.0中 static 目录移除，我们就把静态文件放入 public 文件下

// 静态数据存放的位置
public/mock/home.json

// 和上面一样，启动项目后我们看看数据能不能正常被访问。
http://localhost:8080/mock/home.json

// 之后，不同的地方在于，我们需要手动创建一个 vue.config.js 文件放在根目录下。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/mock'
        }
      }
    }
  }
}

// 配置完成之后也是和上述一样，在项目中直接访问数据即可
axios
 .get('/api/home.json')
 .then(this.handler)