Vue env configuration and simple use in routing

What is env?

The .env file is the environment configuration file when Vue runs the project, it can store variables in different environments. The .env file is juxtaposed with the src directory,

.env: The global default configuration file, which will be loaded and merged regardless of the environment.

.env.development: Configuration file for the development environment

.env.production: configuration file for the production environment

It will be executed when the project starts. Of course, it can be created by itself according to actual needs, and the scaffolding will not be provided in advance.

Note: 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,

Executing the npm run serve command will automatically load the .env.development file

The development environment loads .env and .env.development.

The production environment loads .env and .env.production.

When running npm run serve, it mainly depends on what is followed by the --mode of the server attribute in package.json. If it is development, the .env.development file will be loaded.

 "serve": "vue-cli-service serve --mode development",

About whether to write the NODE_ENV variable? In some places it is said to be added, but in reality it is not necessary. When the project starts, if the NODE_ENV variable is not included in the file, its value will depend on the mode, for example, it is set to "production" in production mode, and it is set to "test" in test mode. The default is " development".

When the environment configuration file conflicts with the global configuration file, the environment configuration file has a higher priority.

You can use process.env.xxx to access properties in other files .

Use in axios

In reality, the address used in the production environment is different from that used in your development environment. Many variables need to be modified for replacement or packaging. If variables are not processed, errors are prone to occur when modifying data. Troubleshooting is a more troublesome thing. Here I will go directly to a simple example I made recently. Of course, I want to mosaic the address. If you know something about it, you can get a complete and comprehensive one.

//axios.js文件
const request = axios.create({
    baseURL: process.env.VUE_APP_API_PROJECT_MAIN_NAME,
    // baseURL: 'http://192.168.31.214:30501',//聂罗刚本地
    timeout:30000,
    // headers: {
    //     'Content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
    // }
})
request.interceptors.request.use(config => {
    //这里我看别人用的不是config，也是用的request，属实不建议这么来。
    if (process.env.NODE_ENV === 'production'){
        //这里的$project我在main入口文件将public文件下的设置的全局变量挂到实例上面去了
        config.baseURL = Vue.prototype.$project.mainBaseUrl + Vue.prototype.$project.mainProjectName
    } 
    console.log('config.baseUrl', config)
    if (getLocalStorage('FileManager')) {   
        let data = getLocalStorage('FileManager')
        config.headers['token'] = data.token
        config.headers['clientType'] = 0
        config.headers['loginType'] = 0
    }
        // config.data = "data=" + JSON.stringify(config.data)
        return config
})

request.interceptors.response.use(res=>{
    // Toast.clear();
    return res
},
(err)=>{
    console.log('err :>> ', err);
}
)

//public文件夹下面的js文件,这里放置了线上的地址
window.PARTY_CONFIG_URL={
    mainBaseUrl:"XXXXXXXXXXXXXXXXXXXX:8101",
    // file:"http://223.247.176.85:18080/file",
    mainProjectName:"/XXXXXXXX",
    // loginProjectName:"/sso",
    // isTest:true,
    // sourceToAnother:["AQYX"]
}

//vue.config.js
 devServer: {
      proxy: {
        '^/archivesManage-service':{
          target: process.env.VUE_APP_API_BASE_URL,
          changeOrigin: true,
          pathRewrite: {
            '^/archivesManage-service': '/archivesManage-service'
          }
        },
        '^/archives': {
          target: process.env.VUE_APP_API_BASE_URL_ONLINE,
          changeOrigin: true,
          pathRewrite: {
            '^/archives': '/archives'
          }
        }
      },
    },

//.env.development
VUE_APP_API_BASE_URL=http:XXXXXXXXXXXXXXx
VUE_APP_API_BASE_URL_ONLINE=http:XXXXXXXXXXXXXXXxxx
VUE_APP_API_PROJECT_MAIN_NAME=/XXXXXXXXXXXXXXX
VUE_APP_API_PROJECT_MAIN_NAME_ONLINE=/XXXXXXXXXXx

//request.js
export function sendHomeList(data){ // 文件派发
  return request({
      url: '/page/sendFiles',
      method: 'post',
      data: data,
    });
}