Vue-cli multi-Environment Configuration

Vue-cli multi-Environment Configuration

Vue-cli provides only Dev and prod environments by default. But in fact, the development process may have another sit or stage environment,
This is the so-called test environment and pre-release environment. So we need to simply modify the code. In fact, it is easy to set different environment variables.

Detailed procedure

1. Add the test command to package. JSON.

  "scripts": {    "dev": "cross-env NODE_ENV=online node build/dev-server.js --host 192.168.1.8",    "local": "cross-env NODE_ENV=local node build/dev-server.js",    "build": "node build/build.js",    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js"  },

2. Create an environment file (base_api is the main address of the interface)
/Config/dev. Env. js (Development Environment)

Module. exports = {node_env: '"development"', env_config: '"Dev"', base_api: '"http: // 192.168.1.7 "'// the backend and backend are used for development and testing}

/Config/sit. Env. js (test environment, test server)

module.exports = {  NODE_ENV: ‘"production"‘,  ENV_CONFIG: ‘"sit"‘,  BASE_API: ‘"http://test.todomore.cn"‘}

/Config/prod. Env. js (production environment, officially server)

module.exports = {  NODE_ENV: ‘"production"‘,  ENV_CONFIG: ‘"prod"‘,  BASE_API: ‘"http://www.todomore.cn"‘}

3. Modify config/index. js

VaR Path = require ("path") module. exports = {// Development Environment configuration Dev: {assetssubdirectory: "static", assetspublicpath: "/", Port: 7127, // context: [/// proxy path // "/shopping", //], // proxypath: "http: // localhost: 7127", csssourcemap: false }, // configure build: {index: path in the production environment. resolve (_ dirname ,".. /.. /.. /public/store/index.html "), assetsroot: path. resolve (_ dirname ,".. /.. /.. /public/Store "), assetssubdirectory:" static ", assetspublicpath:"/store/", productionsourcemap: True, // surge or netlify already gzip all static assets for you. // before setting to 'true', make sure to: // NPM install -- save-dev compression-webpack-plugin productiongzip: false, productiongzipextensions: ["JS ", "CSS"]}

4. Install the plug-in (if there is a cross-env in package. JSON, skip this step)

npm install --save cross-env

1. Modify webpack. Prod. conf
   The original env is the prod. env introduced:

// const env = require(‘../config/prod.env‘)

To:

const env = require("../config/" + process.env.env_config + ".env")

6. Modify the prompt
Unlike build: PRE, node_env must point to the file name in config, which corresponds to the name of env_config.
In this way, the package is successful.
There is a description in build. JS:
js const spinner = ora("building for prod....")
It can be dynamically modified:
js const spinner = ora("building for " + process.env.env_config)

Use commands

# Production environment (official server) NPM run build: prod # test environment (test server) NPM run build: Sit

Generate the DIST configuration in the root directory

Index: path. resolve (_ dirname ,'.. /Dist/index.html '), // entry file path assetsroot: path. resolve (_ dirname ,'.. /Dist '), // generated in the/Dist assetssubdirectory: 'static', // resource subdirectory assetspublicpath: '/', // public resource path

Vue-cli multi-Environment Configuration