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

This article mainly introduces the relevant knowledge of "how to control the use of mock in the development environment in vue". The editor shows you the operation process through an actual case. The method of operation is simple, fast and practical. I hope that this article "how to control the use of mock in the development environment in vue" can help you solve the problem.

Vue controls the use of mock in the development environment and the reasons why it is disabled in the production environment.

Mock intercepts all axios requests and responds accordingly according to the request. Usually, we use mock to obtain the corresponding data when the front and rear ends are developed separately, but when we debug with the backend, we cannot get the back-end data by using mock.

Solution

In the first step, we set mock to be available in the development development environment and not in the production production environment.

The mode is determined by setting the Vue.config.productionTip in the main.js in vue.

The default is false is the production environment. If you set it to true, you will enter the development environment. After setting it up, you can see You are runing Vue in development mode in the browser check as shown below:

In the second step, we set variables in config/dev.env.js and config/prod.env.js. It is equivalent to the same variable name and has different values in different modes.

/ / configuration under dev.env.js. Module.exports = merge (prodEnv, {NODE_ENV:'"development"', MOCK: true / / Development Environment uses mock}) / / prod.env.js configuration module.exports = {NODE_ENV:'"production"', MOCK: false / / production environment disable mock}

Similarly, if there are other variables with the same name that have different values in the production environment and the development environment, they can be defined in the corresponding file, for example, in the case of axios request, different environments have different baseURL, that is, they can be set.

The third step is to set process.env.MOCK & & require (". / mock/index.js") in main.js. The sentence "process.env.MOCK" is to judge the value just set. If it is true, the statement will be executed to introduce mock. If it is false, then the following statements will not be executed, that is, mock will not be introduced.

Using mock in vue (commonly used)

Recently in the study of Vue, encountered the front end of the need for data, their own hands to tap too troublesome, the page is not beautiful, so I thought of using mock. I used it once before, but now I've forgotten all about it. So record it here for a rainy day. This article carries on the use of vue+mock step by step after the completion of the project.

Preparation in advance

1) create a new vue project

2) delete the contents of helloworld.vue to facilitate later debugging

3) create a new button control and bind a click event

Install the axios and mock.js plug-ins

Install using npm

/ / install axios plug-in npm install axios-- save// install mockjs plug-in npm install mockjs-- save-dev introduces import Vue from "vue"; import App from ". / App.vue"; import router from ". / router"; import store from ". / store" in main.js; import axios from 'axios' / / add Vue.prototype.$axios = axios / / add write mock.js

Create a new mock file under src, and a new file mock.js. For details of the code, please refer to the official website of mock.js

Here is a simple example code:

Import Mock from 'mockjs' / / introduces mockjsMock.mock (' / api/test', {data: {test: "test"}}) call

Write click events in helloworld

Methods: {test () {this.$axios ({method: 'get', url: "/ api/test"}) .then (function (response) {console.log (response)}) .catch (function (error) {console.log (error);});} successful

This is the end of the introduction to "how to control the use of mock in vue in the development environment". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.