iview admin axios线上跨域及部署路由访问刷新404解决

1、在main.js引入axios  

import axios from 'axios'


Vue.prototype.$axios = axios; //这样可以在vue页面通过this.$axios全局访问
const { dev, pro } = config.baseUrl;

axios.interceptors.request.use(configs => {//请求前拦截，vue配置里的跨域只对生产环境有效，生产环境就直接设置baseURL为接口访问地址，path重写自已处理，跨域设置得服务端配置处理
  configs.baseURL = process.env.NODE_ENV === "development" ? dev : pro;
  const { token } = store.getters;
  configs.url = configs.url.replace(/api/, "api/v1");
  configs.headers.Authorization = `Bearer ${token}`;
  console.log(configs);
  return configs;
});

axios.interceptors.response.use(
  response => {
    //登陆拦截，只要返回code为5000就返回登陆页面
    if (response.data && response.data.code === 5000) router.redirect("/login");
    return response;
  },
  e => {//错误处理
    const { data, status } = e.response;
    switch (status) {
      case 404:
        break;
      case 403:
      case 401:
        break;
      default:
        break;
    }
    return Promise.reject(e);
  }
);

 2、代码打包部署 

（1）、vue.config.js 配置

const path = require("path");

const resolve = dir => {
  return path.join(__dirname, dir);
};

// 项目部署基础
// 默认情况下，我们假设你的应用将被部署在域的根目录下,
// 例如：https://www.my-app.com/
// 默认：'/'
// 如果您的应用程序部署在子路径中，则需要在这指定子路径
// 例如：https://www.foobar.com/my-app/
// 需要将它改为'/my-app/'
// iview-admin线上演示打包路径： https://file.iviewui.com/admin-dist/
const BASE_URL =
  process.env.NODE_ENV === "production" ? "http://localhost:7070/" : "/";
//这里的localhost:7070为打包后生产环境访问的地址

module.exports = {
  // Project deployment base
  // By default we assume your app will be deployed at the root of a domain,
  // e.g. https://www.my-app.com/
  // If your app is deployed at a sub-path, you will need to specify that
  // sub-path here. For example, if your app is deployed at
  // https://www.foobar.com/my-app/
  // then change this to '/my-app/'
  publicPath: BASE_URL,
  // tweak internal webpack configuration.
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  // 如果你不需要使用eslint，把lintOnSave设为false即可
  lintOnSave: true,
  //兼容低版本浏览器不能解析es6语法，先安装需要的包 
  // npm install -D babel-loader@7 babel-core babel-preset-env webpack
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.m?js$/,
          //exclude用下面配置的话，默认是过滤不编译node_modules 路径下的文件
          //exclude: /(node_modules|bower_components)/,
          //include 指定需要编译的文件路径
          include: [
            resolve("src"),
            resolve("node_modules/tree-table-vue/lib"),
            resolve("node_modules/v-org-tree/dist"),
            resolve("node_modules/view-design/src/locale")// 我的是把iview 升级为4的版本,所以是view-design包，之前是iview 包
          ],
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"]
            }
          }
        }
      ]
    }
  },
  chainWebpack: config => {
    config.resolve.alias
      .set("@", resolve("src")) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set("_c", resolve("src/components"));
  },
  // 设为false打包时不生成.map文件
  productionSourceMap: false,
  // 这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 '' ，即空字符串
  devServer: {//这是生成环境的跨域设置
    proxy: {
      "/api/": {
        target: "http://localhost:7001",
        changeOrigin: true,
        ws: true
      }
    }
  }
};

（2）npm run build 将dist 目录复制到服务器nginx 配置的目录下， nginx 配置：

server {
    listen       7070;
    server_name  localhost;
    root   /home/manage/dist/;	
    location / {
	  try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
	  index  index.html index.htm;
    }
	location @router {
		rewrite ^.*$ /index.html last;
	}
}