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;
}
}