vue 前端解决跨域

vue3 vite.config.js (uniapp)

1.使用

2.配置

import {
	defineConfig
} from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

export default defineConfig({
	plugins: [uni()],
	server: {
		proxy: {
			// 任何请求路径以 /alumni/api 开头的请求将被代理
			'/apijxb': {
				rewrite: path => path.replace(/^\/apijxb/, ''),
				// 被代理到对应的目标地址
				target: 'http://www.xxx.com',
				changeOrigin: true,
				// 路径重写,把 /alumni/api 换成 ''
				
			}
		}
	}
})

vue2  vue.config.js

1.使用

2.配置

"use strict";
const path = require("path");
const defaultSettings = require("./src/settings.js");
function resolve(dir) {
  return path.join(__dirname, dir);
}
const name = defaultSettings.title || "xxx管理平台"; // page title
const port = process.env.port || process.env.npm_config_port || 9257; // dev port
module.exports = {
  publicPath: "/",
  // publicPath: "/pump",
  outputDir: "dist",
  assetsDir: "static",
  // lintOnSave: process.env.NODE_ENV === "development",
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true,
    },
    // 我的代理
    proxy: {
      "/wai": {
        target: "http://www.xxxx.com",  //举例
        changeOrigin: true,
        pathRewrite: { "^/wai": " " },
        onProxyReq: (proxyReq, req, res) => {
          console.log(`Proxying request to: ${proxyReq.path}`);
        },
        onProxyRes: (proxyRes, req, res) => {
          console.log(`Received response from: ${proxyRes.req.path}`);
        },
      },
      "/pump1": {
        target: "http://www.xxxx/api/pump",  //举例
        changeOrigin: true,
        pathRewrite: { "^/pump1": " " },
        onProxyReq: (proxyReq, req, res) => {
          console.log(`Proxying request to: ${proxyReq.path}`);
        },
        onProxyRes: (proxyRes, req, res) => {
          console.log(`Received response from: ${proxyRes.req.path}`);
        },
      },
      "/pump2": {
        target: "http://www.xxxx/api/pump",//举例
        changeOrigin: true,
        pathRewrite: { "^/pump2": " " },
        onProxyReq: (proxyReq, req, res) => {
          console.log(`Proxying request to: ${proxyReq.path}`);
        },
        onProxyRes: (proxyRes, req, res) => {
          console.log(`Received response from: ${proxyRes.req.path}`);
        },
      },
    },
    disableHostCheck: true,
  },
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        "@": resolve("src"),
      },
    },
  },
  chainWebpack(config) {
    config.plugin("preload").tap(() => [
      {
        rel: "preload",
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: "initial",
      },
    ]);
    config.plugins.delete("prefetch");
    config.module.rule("svg").exclude.add(resolve("src/icons")).end();
    config.module
      .rule("mjs")
      .test(/\.mjs$/)
      .include.add(/node_modules/)
      .end()
      .type("javascript/auto")
      .use("babel-loader")
      .loader("babel-loader")
      .options({
        presets: ["@babel/preset-env"],
      });
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      })
      .end();
    config.when(process.env.NODE_ENV !== "development", (config) => {
      config
        .plugin("ScriptExtHtmlWebpackPlugin")
        .after("html")
        .use("script-ext-html-webpack-plugin", [
          {
            inline: /runtime\..*\.js$/,
          },
        ])
        .end();
      config.optimization.splitChunks({
        chunks: "all",
        cacheGroups: {
          libs: {
            name: "chunk-libs",
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: "initial",
          },
          elementUI: {
            name: "chunk-elementUI",
            priority: 20,
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
          },
          commons: {
            name: "chunk-commons",
            test: resolve("src/components"),
            minChunks: 3,
            priority: 5,
            reuseExistingChunk: true,
          },
        },
      });
      config.optimization.runtimeChunk("single");
    });
  },
};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值