why

  • Mockjs is fine for local development, but not for production
  • 2. When mock data was implemented through module.exports and export and NPM run build was packaged, these fake data would be packaged into app.js file, resulting in large files and slow rendering of the first screen; Also, packaging will fail if the mock size in the JS file exceeds the Webpack limit
  • 3. Remote mock data is not required. Like YApi, netease NEI

scenario

  • 1. When doing a demo project, the data needs to be completely localized
  • 2. When doing demo projects, require data to be available for modification by business people
  • 3. Mock data volume of 1W + (because the project used 6W +, more than 10m files, need to use this method)
  • 4. To do the project, the front end personnel need to define the interface data first, and the background personnel cooperate with the transmission. At this time the defined data format is directly thrown to the background staff on the line, especially some “check”, no “add, delete and change” project, the front end is written, basically do not need to modify, very convenient.
  • 5. Based on VUE2 CLI3 project

methods

Vue CLI3 project, hit the production package, the file inside the public folder, is not compiled by Webpack, directly copied to publicPath set directory, the development of json data, images and other resource files, can be put in the public directory.

The mock resources

As follows, prepare an image and a JSON file

Table. The json, the PNG

|-- src
|-- public
    |-- data
        |-- table.json
    |-- images
        |-- cat.png

Copy the code

configuration

The files involved are as follows (specific reference code) :

| - SRC | -. Env. Development / / development environment configuration, main is to configure the server address. | - env. The production / / production environment configuration, main is to configure the server address | -- Settings. Js / / some global configuration, The publicPath value is set here | - utils | -- mock - request. Js / / axios request packaging. | | - API - table js / / get the table. The request of the json data encapsulation | - views | - MockDataTest | -- index. / / used to display the request results vue | -- index. SCSS | -- index. Js | - public | - data | -- table. Json | | -- - images cat.png |-- vue.config.jsCopy the code

vue.config.js + settings.js

First, configure the access to the public path. For example, if you want to add the dist path to the address during the access, you can configure it in vue.config.js as follows

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/dist',
}
Copy the code

Remember to synchronize this with publicPath in settings.js for convenience.

.env.development + .env.production

This is mainly the address of the server deployed under configuration. For example, during development, the local access address is http://localhost:8081

VUE_APP_MOCK_URL = 'http://localhost:8081/'
Copy the code

mock-request.js

Env.development or.env.production server address:

baseURL: process.env.VUE_APP_MOCK_URL
Copy the code

The system automatically reads server addresses configured in different environments based on commands

table.js

Here is how the server requests data from the.json file, as shown below

import mrequest from '@/utils/mock-request'
import defaultSettings from '@/settings'
const { publicPath } = defaultSettings

export const tableData = () => {
  return mrequest({
    url: publicPath + `/data/table.json`,
    method: 'get'
  })
}
Copy the code

mockDataTest

This is mainly a demo

  • 1. Call the interface and display table.json data on the interface
  • 2, display the playing picture (can also be other resources, such as music, video)

It depends on the code

Results the following

code

Code, reference

conclusion

Simple implementation of mock data requests without relying on a background interface. The data is stored in a.JSON file. These files in the public folder are not compiled, so they are easy to modify and replace. After packaging production, you can directly put the static server to run.

Above, because a presentation platform needs, data, pictures, videos are frequently modified and replaced, so it is implemented in this way.