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.tokenconfig.headers['clientType'] = 0config.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.jsdevServer: {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,});
}