瀏覽代碼

配置反向代理

MG 2 年之前
父節點
當前提交
9730ea5d22
共有 3 個文件被更改,包括 155 次插入157 次删除
  1. 3 1
      .env.development
  2. 64 72
      src/utils/request.js
  3. 88 84
      vite.config.js

+ 3 - 1
.env.development

@@ -4,7 +4,9 @@ VITE_APP_TITLE = 金田基础框架
 # 开发环境配置
 # 开发环境配置
 VITE_APP_ENV = 'development'
 VITE_APP_ENV = 'development'
 
 
+VUE_APP_BASE_API ='/api'
+
 # 金田基础框架/开发环境
 # 金田基础框架/开发环境
-VITE_API_URL = 'http://218.59.194.82:13182/'
+VITE_API_URL = 'http://10.88.77.131:8082/'
 
 
 # 后台管理地址: http://218.59.194.82:13190/sdjt-admin/
 # 后台管理地址: http://218.59.194.82:13190/sdjt-admin/

+ 64 - 72
src/utils/request.js

@@ -1,99 +1,91 @@
-import axios from 'axios';
-import qs from 'qs';
-import NProgress from 'nprogress'; //页面顶部加载进度条
-import 'nprogress/nprogress.css';
+import axios from "axios";
+import qs from "qs";
+import NProgress from "nprogress"; //页面顶部加载进度条
+import "nprogress/nprogress.css";
 
 
-import {
-	ElNotification,
-	ElMessageBox,
-	ElMessage,
-	ElLoading
-} from 'element-plus';
+import { ElNotification, ElMessageBox, ElMessage, ElLoading } from "element-plus";
 //此处注释store
 //此处注释store
 // import store from '@/store';
 // import store from '@/store';
-import cache from '@/utils/cache';
+import cache from "@/utils/cache";
 
 
 // axios实例
 // axios实例
 const request = axios.create({
 const request = axios.create({
-	// axios中请求配置有baseURL选项,表示请求URL公共部分
-	baseURL: import.meta.env.VITE_API_URL,
-	// 超时
-	timeout: 60000,
-	headers: {
-		 'Content-Type': 'application/json; charset=utf-8'
-	}
+  // axios中请求配置有baseURL选项,表示请求URL公共部分
+  baseURL: import.meta.env.NODE_ENV === "development" ? import.meta.env.VUE_APP_BASE_API : import.meta.env.VITE_API_URL,
+  // 超时
+  timeout: 60000,
+  headers: {
+    "Content-Type": "application/json; charset=utf-8"
+  }
 });
 });
 
 
 NProgress.configure({
 NProgress.configure({
-	showSpinner: true
+  showSpinner: true
 });
 });
 
 
 // 请求拦截器
 // 请求拦截器
 request.interceptors.request.use(
 request.interceptors.request.use(
-	(config) => {
-		// const userStore = store.userStore
-		// if (userStore?.token) {
-		// 	config.headers.Authorization = userStore.token
-		// }
+  (config) => {
+    // const userStore = store.userStore
+    // if (userStore?.token) {
+    // 	config.headers.Authorization = userStore.token
+    // }
 
 
-		// 追加时间戳,防止GET请求缓存
-		if (config.method?.toUpperCase() === 'GET') {
-			config.params = {
-				...config.params,
-				t: new Date().getTime()
-			}
-		}
+    // 追加时间戳,防止GET请求缓存
+    if (config.method?.toUpperCase() === "GET") {
+      config.params = {
+        ...config.params,
+        t: new Date().getTime()
+      };
+    }
 
 
-		if (Object.values(config.headers).includes('application/x-www-form-urlencoded')) {
-			config.data = qs.stringify(config.data)
-		}
+    if (Object.values(config.headers).includes("application/x-www-form-urlencoded")) {
+      config.data = qs.stringify(config.data);
+    }
 
 
-		return config
-	},
-	error => {
-		return Promise.reject(error)
-	}
-)
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
 
 
 // 响应拦截器
 // 响应拦截器
 request.interceptors.response.use(
 request.interceptors.response.use(
-	(response) => {
-		if (response.status !== 200) {
-			return Promise.reject(new Error(response.statusText || 'Error'));
-		}
-		// console.log('输出结果', response)
+  (response) => {
+    if (response.status !== 200) {
+      return Promise.reject(new Error(response.statusText || "Error"));
+    }
+    // console.log('输出结果', response)
 
 
-		const res = response.data;
-		// 响应成功
-		if (res.success == true) {
-			return res;
-		}
-		// 错误提示
-		ElMessage.error(res.message);
+    const res = response.data;
+    // 响应成功
+    if (res.success == true) {
+      return res;
+    }
+    // 错误提示
+    ElMessage.error(res.message);
 
 
-		// 没有权限,如:未登录、登录过期等,需要跳转到登录页
-		// if (res.code === 401) {
-		// 	store.userStore?.setToken('')
-		// 	location.reload();
-		// }
+    // 没有权限,如:未登录、登录过期等,需要跳转到登录页
+    // if (res.code === 401) {
+    // 	store.userStore?.setToken('')
+    // 	location.reload();
+    // }
 
 
-		return Promise.reject(new Error(res.msg || 'Error'));
-	},
-	async (error) => {
-		NProgress.done();
+    return Promise.reject(new Error(res.msg || "Error"));
+  },
+  async (error) => {
+    NProgress.done();
 
 
-		if (error.response) {
-			const {
-				status,
-				config
-			} = error.response;
-		}
+    if (error.response) {
+      const { status, config } = error.response;
+    }
 
 
-		return Promise.reject({
-			message: error.message
-		});
-	}
+    return Promise.reject({
+      message: error.message
+    });
+  }
 );
 );
 
 
 // 导出 axios 实例
 // 导出 axios 实例
-export default request
+export default request;

+ 88 - 84
vite.config.js

@@ -1,98 +1,102 @@
-import vue from '@vitejs/plugin-vue'; //提供 Vue 3 单文件组件支持
+import vue from "@vitejs/plugin-vue"; //提供 Vue 3 单文件组件支持
 import OptimizationPersist from "vite-plugin-optimize-persist";
 import OptimizationPersist from "vite-plugin-optimize-persist";
 import PkgConfig from "vite-plugin-package-config";
 import PkgConfig from "vite-plugin-package-config";
-import path from 'path';
-import {
-	defineConfig
-} from 'vite';
+import path from "path";
+import { defineConfig } from "vite";
 // import postCssPxToRem from "postcss-pxtorem";
 // import postCssPxToRem from "postcss-pxtorem";
 // https://vitejs.dev/config/
 // https://vitejs.dev/config/
 export default defineConfig({
 export default defineConfig({
-	plugins: [vue()],
-	plugins: [
-		vue(),
-		PkgConfig(),
-		OptimizationPersist()
-	],
+  plugins: [vue()],
+  plugins: [vue(), PkgConfig(), OptimizationPersist()],
 
 
-	// 部署生产环境和开发环境下的URL。
-	// 默认情况下,vite 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.ruoyi.vip/。
-	// 如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。
-	// base: './',
-	base: process.env.NODE_ENV === 'production' ? './' : '/sdjt/',
+  // 部署生产环境和开发环境下的URL。
+  // 默认情况下,vite 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.ruoyi.vip/。
+  // 如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。
+  // base: './',
+  base: process.env.NODE_ENV === "production" ? "./" : "/sdjt/",
 
 
-	resolve: {
-		alias: {
-			// 设置别名
-			'@': path.resolve(__dirname, './src')
-		},
+  resolve: {
+    alias: {
+      // 设置别名
+      "@": path.resolve(__dirname, "./src")
+    },
 
 
-		//导入时想要省略的扩展名列表
-		extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
-	},
+    //导入时想要省略的扩展名列表
+    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"]
+  },
 
 
-	/* 全局变量 */
-	css: {
-		// 指定传递给 CSS 预处理器的选项
-		preprocessorOptions: {
-			scss: {
-				additionalData: '@use "@/assets/styles/variables.scss" as *;'
-			},
+  /* 全局变量 */
+  css: {
+    // 指定传递给 CSS 预处理器的选项
+    preprocessorOptions: {
+      scss: {
+        additionalData: '@use "@/assets/styles/variables.scss" as *;'
+      }
+    }
+    // postcss: {
+    // 	plugins: [
+    // 		postCssPxToRem({
+    // 			rootValue: 192, // (设计稿/10)1rem的大小
+    // 			propList: ['*'], // 需要转换的属性,这里选择全部都进行转换
+    // 		})
+    // 	]
+    // }
+  },
 
 
-		},
-		// postcss: {
-		// 	plugins: [
-		// 		postCssPxToRem({
-		// 			rootValue: 192, // (设计稿/10)1rem的大小
-		// 			propList: ['*'], // 需要转换的属性,这里选择全部都进行转换
-		// 		})
-		// 	]
-		// }
-	},
+  /* 服务器配置 */
+  server: {
+    /* 端口 */
+    port: 3000,
+    /* 地址 */
+    host: "0.0.0.0",
+    /* 编译后是否打开浏览器 */
+    open: true,
+    /* 是否开启https */
+    https: false,
+    proxy: {
+      [process.env.VUE_APP_BASE_API]: {
+        target: process.env.VITE_API_URL,
+        ws: true,
+        changeOrigin: true,
+        rewrite: {
+          //重写路径,这种是没有我们定义的前缀
+          ["^" + process.env.VUE_APP_BASE_API]: ""
+        }
+      }
+    }
+  },
 
 
-	/* 服务器配置 */
-	server: {
-		/* 端口 */
-		port: 3000,
-		/* 地址 */
-		host: "0.0.0.0",
-		/* 编译后是否打开浏览器 */
-		open: true,
-		/* 是否开启https */
-		https: false,
-	},
+  /* 打包配置 */
+  build: {
+    /**
+     * 设置最终构建的浏览器兼容目标。默认值是一个 Vite 特有的值——'modules',这是指 支持原生 ES 模块的浏览器。
+     */
+    target: "modules",
 
 
-	/* 打包配置 */
-	build: {
-		/**
-		 * 设置最终构建的浏览器兼容目标。默认值是一个 Vite 特有的值——'modules',这是指 支持原生 ES 模块的浏览器。
-		 */
-		target: 'modules',
+    /**
+     * 指定输出路径(相对于 项目根目录).
+     * @default 'dist'
+     */
+    outDir: "dist",
 
 
-		/**
-		 * 指定输出路径(相对于 项目根目录).
-		 * @default 'dist'
-		 */
-		outDir: "dist",
+    /**
+     * 启用/禁用 CSS 代码拆分
+     */
+    cssCodeSplit: true,
 
 
-		/**
-		 * 启用/禁用 CSS 代码拆分
-		 */
-		cssCodeSplit: true,
-
-		/**
-		 * 混淆器,terser构建后文件体积更小
-		 */
-		minify: 'terser', // 混淆器,terser构建后文件体积更小
-		chunkSizeWarningLimit: 4500,
-		rollupOptions: {
-			output: {
-				manualChunks(id) {
-					if (id.includes('node_modules')) {
-						 return id.toString().split('node_modules/')[1].split('/')[0].toString();
-					}
-				}
-			}
-		}
-	},
-})
+    /**
+     * 混淆器,terser构建后文件体积更小
+     */
+    minify: "terser", // 混淆器,terser构建后文件体积更小
+    chunkSizeWarningLimit: 4500,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes("node_modules")) {
+            return id.toString().split("node_modules/")[1].split("/")[0].toString();
+          }
+        }
+      }
+    }
+  }
+});