vue项目打包后,是生成一系列的静态文件,包括项目的请求IP都打入包内,如果后台服务改动,这时你的前端文件,又要重新编译打包,这里采用前端自行请求一个配置文件,动态修改你的相关配置。
静态文件
// config.json
{
"api": "test.com"
}
请求文件
在项目store中请求你的配置文件,写入state中,在调用的时候可以全局访问到你的配置
// api.js
GetConfigApi() {
return new Promise((resolve, reject) => {
axios
.get(`/config.json?v=${new Date().getTime()}`)
.then(result => {
const configApi = {
API: result.data['api'], // 统一接口
};
resolve(configApi);
})
.catch(error => {
reject(error);
});
});
}
nginx部署
因为vue-router有hash和history不同的两种模式,使用不同的模式,nginx的配置不同,hash模式下,不需要改动,只需要部署你的前端文件就可以了,所以这里只讨论history模式下.conf文件的修改
访问修改nginx配置文件nginx.conf
server {
listen 80;
server_name test.com;