Configure the vue environment and configure packaging commands (multiple proxy addresses).

Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right

---

1. Environment configuration.

1. Create the following three files in the same directory as src:

Note: The file name is fixed and should not be customized.
The attribute name must start with VUE_APP_, such as: VUE_APP_XXX
Vue will automatically load the corresponding environment configuration file according to the startup command. Vue is loaded according to the file name, so don't change it without authorization.

Environment Configuration File > Global Configuration File
When the global configuration file and the environment configuration file have the same configuration items, the environment configuration items will override the global configuration items.
That is, the environment configuration file .env.development file will override the global vue.config.js file to configure the proxy.

How the properties defined in the configuration file are accessed in other files:

You can use process.env.xxx to access properties

3. What is process.env used for?

Since our project needs to run in different environments (development, production, testing, etc.), this avoids us needing to switch the requested address and related configuration multiple times. Vue-cli2 can be configured directly in the config file , but vue-cli4 and vue-cli3 have been simplified, what if there is no config file?
1) Create .env series files
First, we create 3 new files in the root directory, namely .env.development, .env.production, .env.test
(note that the files only have suffixes).

The .env.development mode is used for serve, development environment, that is, the configuration in this file will be referenced when starting the environment.
The env.production mode is used for build and online environment.
.env.test test environment

When using this variable, you can use process.env.VUE_APP_BASE_API to get the value.

Reference document: https://blog.csdn.net/coinisi_li/article/details/128547778

.env.test test environment

#测试环境
NODE_ENV = 'test'
VUE_APP_BASE_API = 'api'
VUE_APP_PRE_API = 'file'
# 测试环境，Url地址
VUE_APP_URL = '测试环境代理地址1'
VUE_APP_PRE_URL='测试环境代理地址2'

.env.development production environment

#生产环境
NODE_ENV = 'development'
VUE_APP_BASE_API = 'api'
VUE_APP_PRE_API = 'file'
#生产环境，Url地址
VUE_APP_URL = '生产环境代理地址1'
VUE_APP_PRE_URL='生产环境代理地址2'

.env.pre Online environment

# 线上环境
NODE_ENV = 'pre'
VUE_APP_BASE_API = 'api'
VUE_APP_PRE_API = 'file'
# 线上环境，Url地址
VUE_APP_URL = '线上环境代理地址1'
VUE_APP_PRE_URL='线上环境代理地址2'

Second, proxy server configuration.

1. Configure the proxy server address in vue.config.js:

proxy: {
    
    
            '/file': {
    
    
                target: process.env.VUE_APP_PRE_URL,
                changeOrigin: true,
                ws: true,
                pathRewrite: {
    
    
                    '/file':'file'
                }
            },
            [process.env.VUE_APP_BASE_API]: {
    
    
                target: process.env.VUE_APP_URL,
                changeOrigin: true,
                ws: true,
                pathRewrite: {
    
    
                    ['^' + process.env.VUE_APP_BASE_API]: ''
                }
            },
        },

3. Packaging command configuration.

Configure packaging commands in package.json.

  "scripts": {
    
    
    "serve": "vue-cli-service serve --mode development",
     //生产环境打包命令npm run build
    "build": "vue-cli-service build --mode development",
    //线上环境打包命令npm run build:pre
    "build:pre": "vue-cli-service build --mode pre",
    //测试环境打包命令npm run build:test
    "build:test": "vue-cli-service build --mode test"
  }

If it is useful, please like, follow and add to favorites (｡･ω･｡)ﾉ♡.