vue种env配置以及在路由中的简单使用

env是什么？

.env文件是vue运行项目时的环境配置文件，它可以存储不同环境下的变量。.env文件与src目录并列，

.env：全局默认配置文件，无论什么环境都会加载合并。

.env.development：开发环境的配置文件

.env.production：生产环境的配置文件

在项目启动的时候会执行，当然了，根据实际需要可以自行创建，脚手架不会事先提供的。

注意：属性名必须以 VUE_APP_ 开头，如：VUE_APP_XXX

vue 会根据启动命令自动加载相对应的环境配置文件，

执行npm run serve命令，会自动加载.env.development文件

开发环境加载 .env 和 .env.development 。

生成环境加载 .env 和 .env.production 。

运行npm run serve的时候主要还是看package.json中 server属性的--mode后面跟的是啥。如果是development，就会加载.env.development文件。

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

关于是否要写上 NODE_ENV 变量？有些地方说要加上，实际则没有必要。在项目启动的时候，如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式，例如，在 production 模式下被设置为 "production"，在 test 模式下被设置为 "test"，默认则是 "development"。

环境配置文件和全局配置文件冲突的时候，环境配置文件优先级权重更高。

在其它文件中可以使用 process.env.xxx 来访问属性。

axios中的使用

实际情况中，生产环境和你开发环境使用的地址是不一样的，如果更换或者打包都需要修改很多变量，如果不进行变量的处理，那么修改数据的时候极易发生错误。排查错误又是个更麻烦的事情。这里我直接上我最近弄的一个简单的一个例子，当然了地址啥的我要马赛克一下。知道个大概你就能弄个完整全面的。

//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,
    });
}