Vue configures webpack production environment.env.production, test environment.env.development (configures packaging access addresses in different environments)

vue-cli distinction method

Vue configuration production environment.env.production, test environment.env.development

Vue configures webpack production environment and test environment

When using webpack to create a vue2 project, in order to solve the problem of inconsistent global variables corresponding to production packaging and test packaging.

First look at the changes in package.json:

  "scripts": {
    
    
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "build:dev": "cross-env ENV_NUM=0 node build/build.js",
    "build:pro": "cross-env ENV_NUM=1 node build/build.js"
  },

For me, I added two packaging variables

build:dev corresponds to the packaging of the test version
build:pro corresponds to the packaging of the production version

The commands to run are

npm run build:dev

npm run build:pro

What is cross-env?

Running npm run build:dev will pass the value of ENV-NUM to process.env, and you can get the value through process.env.ENV_NUM in the project, which is '0';
but the NPM. Different systems are not compatible, which may cause the system to freeze. (I use a mac, and all my colleagues use windows. Maybe the code given to Party A will also be useful to the master of lunix. Of course, if it is packaged with a server, there are more lunix)

Use the cross-env plugin to handle this:

Install npm i cross-env --save

npm i cross-env --save

Look at the directory structure:
insert image description here
dev.env.js will only be used in local development, it will be used in webpack.dev.conf.js;
prod.env.js will be used after packaging, whether it is a test environment or a production environment, Used in webpack.prod.conf.js.

Create a new prodReal.env.js file, which is at the same level as prod.env.js:
insert image description here

'use strict'
// 这个环境为线上真实环境
module.exports = {
    
    
  NODE_ENV: '"production"',
  // ENV_NUM 没有实际作用 只是做标识
  ENV_NUM: '"1"',
  VUE_APP_URL: '"http://xxxxxxxxx"',
}

At this time we go to the webpack.prod.conf.js file:
insert image description here

const prodenv = require('../config/prod.env')
const prodRealenv = require('../config/prodReal.env')

Make changes in the following plugins:
insert image description here
Judging the variables passed in package.json, you can also know whether it is executing build:dev or build:pro, and then use the corresponding configuration.

    new webpack.DefinePlugin({
    
    
      // 0 本地开发/测试环境  1为 生产环境
      'process.env': process.env.ENV_NUM === '0' ? prodenv : prodRealenv
    }),

By this time it's over.

Take a look at the configuration of the local development environment:
insert image description here
Configuration of the online test environment:

Configuration of the online production environment:

verify

So far, it is completely finished. Let’s test it below.
Replace the url of dev.env.js with: I am a local environment.
Replace the url of prod.env.js with: I am an online test environment
. Replace prodReal.env.js The url is replaced by: I am an online production environment

Add a line to print in the root component:

  mounted() {
    
    
    // 备用打印
    console.log("===================", 'process.env.VUE_APP_URL')
    console.log(process.env, 'process.env.VUE_APP_URL')
  },

1. Run and print locally:

npm run dev

insert image description here
2. Run the online test environment, first package:

npm run build:dev

After packaging, cmd enters the dist folder, executes the http-server command, and starts the project: If the
http-server command reports an error:

npm i -g http-server

insert image description here

3. Run the online production environment, first package:

npm run build:pro

After packaging, cmd enters the dist folder, executes the http-server command, and starts the project: If the
http-server command reports an error:

npm i -g http-server

insert image description here

Test success!

Learning reference: modify the webpack environment of vue-cli2, add a data simulation dev and multiple different build addresses