Vue项目nginx部署

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;