How to switch between Vue production and development environments and use filters

1. Switch between production environment and development environment

Development environment: The development environment is to configure proxyTable under /config/index.js
Production environment: The proxy becomes invalid after the project is packaged, so it needs to be reconfigured in the production environment

The first method: by configuring the .env file

Reference: https://cli.vuejs.org/zh/guide/mode-and-env.html

Second method

Step 1: Create different environment js files and switch them through cross-env

 config
    dev.js    
    prod.js
  
dev.js
module.exports = {
  BASE_URL: "https://test.365msmk.com"
};

prod.js

module.exports = {
  BASE_URL: "https://www.365msmk.com"
};

Step 2: Install cross-env and configure the parameters to be passed in package.json

Installation instructions: npm install cross-env -D


Configuration in package.json

"scripts": {
    "serve": "cross-env BUILD_ENV=dev vue-cli-service serve",
    "build": "cross-env BUILD_ENV=prod vue-cli-service build"
  }

Step 3: Modify vue.config.js to add configuration for webpack

module.exports = {
 .....
  chainWebpack: config => {
    config.plugin("define").tap(args => {
      args[0]['process.env'].BUILD_ENV = JSON.stringify(process.env.BUILD_ENV);
      return args;
    });
  }
};

Switch the environment in the business code

//Read BUILD_ENV in the process.env constant object
const envType = process.env.BUILD_ENV;

const urlObj = require(`../config/${envType}.js`);

//Create an axios instance const service = axios.create({
  baseURL: urlObj.BASE_URL + vipUrl
});

2. Filters

1. Global filter definition:

Vue.filter('filter name',function(a,b,c) {
  //....
  
 return ...

})

use:

{{ num | filter name (v1, v2) }}

2. Local filter

3. Summary: Filter usage scenarios: used to process background data into the data format that users will eventually display

For example: gender, payment status, logistics status, timestamp. . . . . .

3. Use of moment time library

moment official website: momentjs.cn/docs/

Installation instructions: npm i moment

Format: moment(timestamp).format("YYYY year MM month DD day, HH hour mm minute SS second");

Format display: http://momentjs.cn/docs/#/displaying/

I am currently working hard to learn the development environment and production environment, summarizing every day, making progress every day, and becoming a leader in the IT industry as soon as possible.

This concludes this article on how to switch between Vue production and development environments and the use of filters. For more information on switching between Vue production and development environments, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!