Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to request mock data from vue local simulation server". In the operation process of actual cases, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

reason

1. It is OK to use mockjs locally, but it is not good to use mock data when it is needed for production.

2. When mock data is implemented through module.exports and export, when npm run build is packaged for production, these fake data will be packaged into app.js file, resulting in large files and slow rendering of the first screen; moreover, when the amount of mock data in js file exceeds webpack limit, packaging will fail.

Remote mock data is not needed. Like YApi, Netease NEI

scene

1. When doing demonstration projects, the data needs to be fully localized.

2. When doing demonstration projects, the required data can be modified by business personnel.

3. When the amount of mock data is 1w+(because the data used in the project is 6w+, more than 10 M files, this method is needed)

4. For projects to be done, front-end personnel need to define interface data first, and background personnel need to cooperate with transmission. At this time, the defined data format can be directly thrown to the background personnel, especially for some "check" projects without "addition, deletion and change." After the front-end is written, there is basically no need to modify it, which is quite convenient.

5. Based on VUE2 CLI3 project

method

vue cli3 project, when playing production packages, the files in the public folder are copied directly to the directory set by publicPath without webpack compilation. The json data, images and other resource files used during development can be placed in the public directory.

mock resource

Below, a picture and a json file are prepared

table.json， cat.png

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

The documents involved are as follows (specific reference codes):

|-- src |-- .env.development //development environment configuration, mainly to configure the server address |-- .env.production //Production environment configuration, mainly configuring server addresses |-- settings.js //some global configuration, set the publicPath value here |-- utils |-- mock-request.js // axios request encapsulation |-- api |-- table.js //get table.json data request wrapper |-- views |-- mockDataTest //Used to display the results of the request |-- index.vue |-- index.scss |-- index.js|-- public |-- data |-- table.json |-- images |-- cat.png|-- vue.config.jsvue.config.js + settings.js

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

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

For convenience, remember to synchronize the changes with the publicPath in settings.js.

.env.development + .env.production

Here is mainly the address of the server deployed under configuration. For example, during development, the address accessed locally is http://localhost:8081. Define a parameter to store this address. The name is arbitrary.

VUE_APP_MOCK_URL = 'http://localhost:8081/'mock-request.js

Here is mainly to configure the baseURL of axios, directly read the server address configured in.env.development or .env.production, for example,

baseURL: process.env.VUE_APP_MOCK_URL

This will automatically read the server address configured in different environments according to the command.

table.js

Here is the server request related,.json file data how to request access, as shown below

import mrequest from '@/utils/mock-request'import defaultSettings from '@/settings'const { publicPath } = defaultSettingsexport const tableData = () => { return mrequest({ url: publicPath + `/data/table.json`, method: 'get' })}mockDataTest

This is mainly a demonstration effect

1. Call the interface and display the data of table.json on the interface.

2. Display pictures (or other resources, such as music and videos)

effect is as follows

"vue local simulation server how to request mock data" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.