Vue项目中前端配置解决跨越问题

/*
 * @Descripttion: 
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2021-10-15 18:13:28
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-10-20 11:09:13
 */
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://xx.xx.xx.xx:8000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      },
    },
    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use,
     a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, 
    // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

封装axios

/*
 * @Descripttion: 
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2021-10-15 17:57:01
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-10-15 17:57:11
 */


import axios from 'axios';
//引入vue
import Vue from 'vue';
//新创建一个vue实例
let v = new Vue();
import router from '../router';

axios.defaults.timeout = 10000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//请求拦截
axios.interceptors.request.use(
	(config) => {
		const token = window.localStorage.getItem('blogToken');
		token && (config.headers.Authorization = token);
		return config;
	},
	(error) => {
		return Promise.error(error);
	}
);
//响应拦截
axios.interceptors.response.use(
	(response) => {
		if (response.status === 200) {
			return Promise.resolve(response);
		} else {
			return Promise.reject(response);
		}
	},
	(error) => {
		if (error.response.status) {
			console.log(error);

			switch (error.response.status) {
				case 401:
					router.replace({
						path: '/login',
						query: { redirect: router.currentRoute.fullPath }
					});
					v.$message({
						type: 'warning',
						message: error.response.data
					});
					break;
				case 403:
					v.$message({
						type: 'warning',
						message: 'token已过期，请重新登录'
					});
					localStorage.removeItem('blogToken');
					// store.commit('loginSuccess', null);
					// 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
					setTimeout(() => {
						router.replace({
							path: '/login',
							query: {
								redirect: router.currentRoute.fullPath
							}
						});
					}, 2000);
					break;
				case 404:
					v.$message({
						type: 'warning',
						message: '网络请求不存在'
					});
					break;
				case 500:
					v.$message({
						type: 'warning',
						message: '服务器异常，请联系管理员'
					});
					break;
				// 其他错误，直接抛出错误提示
				default:
					v.$message({
						type: 'warning',
						message: error.response.data
					});
			}
			return Promise.reject(error.response);
		}
	}
);



export const get = (url, params) => {
	return new Promise((resolve, reject) => {
		axios
			.get(url, { params })
			.then((res) => {
				resolve(res.data);
			})
			.catch((err) => {
				reject(err.data);
			});
	});
};



export const post = (url, params) => {
	return new Promise((resolve, reject) => {
		axios
			.post(url, params)
			.then((res) => {
				resolve(res.data);
			})
			.catch((err) => {
				reject(err.data);
			});
	});
};

调用后台接口

/*
 * @Descripttion: 
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2021-10-15 17:57:01
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-10-20 09:58:20
 */


/**
 * @description: 获取表格数据api配置
 */

import { get, post } from './axios';
export const getDevices = (p) => get('/api/xx/devices', p); //获取设备数据

在页面中使用

<script>
import { getDevices } from "../api/table";
export default {
  name: "index",
  data() {
    return {
       devicesList ：[]
    };
  },
  mounted() {
    this.getDevicesDate();
  },
  methods: {
    /**
     * @name:获取设备信息
     * @msg:
     * @param {*} data
     * @return {*}
     */
    getDevicesDate() {
      getDevices()
        .then((response) => {
          if (response.code == 200) {
           this.devicesList = response.data.devices;
          } else {
            this.$message.error(response.message);
          }
        })
        .catch((error) => {
          return;
        });
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>