2023年11月29日发(作者：)
vue-cli3跨域处理，解决500错误以及Proxyerror
⽬录
1 上代码（使⽤的是vue-cli3脚⼿架）
1）⽬录
2） 这⾥只要看devServer这⼀项就ok
//
const path = require("path");
const webpack = require("webpack");
s = {
// 项⽬部署的基本路径
// 默认假设你的应⽤将会部署在域名的根部
// ⽐如，/
//如果你的应⽤是部署在⼀个⼦路径下，那么你需要在这⾥指定⼦路径，⽐如，如果你部署在 /my-app/; 那么将这个值改为 “/my-app/”
publicPath: "/",
//将构建好的⽂件输出到哪⾥ 当运⾏ vue-cli-service build 时⽣成的⽣产环境构建⽂件的⽬录。注意⽬标⽬录在构建之前会被清除 (构建时传⼊ --no-clean 可关闭该⾏
outputDir: "dist",
//放置⽣成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) ⽬录。
assetsDir: "",
// 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后⽣效。
// 设置为 true 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令⾏，且不会使得编译失败。
lintOnSave: true,
//是否使⽤包含运⾏时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使⽤ template 选项了，但是这会让你的应⽤额外增加 10kb 左右。
runtimeCompiler: false,
// 默认情况下 babel-loader 会忽略所有 node_modules 中的⽂件。如果你想要通过 Babel 显式转译⼀个依赖，可以在这个选项中列出来。
transpileDependencies: [],
// 如果你希望让 lint 错误在开发时直接显⽰在浏览器中，你可以使⽤ lintOnSave: 'error'。这会强制 eslint-loader 将 lint 错误输出为编译错误，同时也意味着 lint 错误
//如果你不需要⽣产环境的 source map，可以将其设置为 false 以加速⽣产环境构建。
productionSourceMap: true,
//是⼀个函数，会接收⼀个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进⾏更细粒度的修改。
chainWebpack: () => {},
//是否为 Babel 或 TypeScript 使⽤ thread-loader。该选项在系统的 CPU 有多于⼀个内核时⾃动启⽤，仅作⽤于⽣产构建。
parallel: require("os").cpus().length > 1,
// 向 PWA 插件传递选项。
// /vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// 所有 webpack-dev-server 的选项都⽀持。注意：有些值像 host、port 和 https 可能会被命令⾏参数覆写。
//有些值像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 publicPath 同步以保障正常的⼯作。
// 代理配
devServer: {
host: "0.0.0.0",
port: 8082, // 端⼝号
https: false, // https:{type:Boolean}
open: true, //配置⾃动启动浏览器 open: 'Google Chrome'-默认启动⾕歌
// proxy: 'localhost:9000' // 配置跨域处理,只有⼀个代理
// 配置多个代理
proxy: {
"/api": {//配置代理以“/api”
target: "localhost:4000", //⽬标主机
ws: true, //代理的WebSockets
changeOrigin: true, //需要虚拟主机站点
pathRewrite: {
"^/api": ""
}
}
}
},
// 第三⽅插件选项
// 这是⼀个不进⾏任何 schema 验证的对象，因此它可以⽤来传递任何第三⽅插件选项。
pluginOptions: {}
};
3）api/代码
import axios from 'axios'
export default function ajax (url, data={}, type='GET') {
return new Promise(function (resolve, reject) {
// 执⾏异步ajax请求
let promise;
if (type === 'GET') {
// 准备url query参数数据
let dataStr = ''; //数据拼接字符串
(data).forEach(key => {
dataStr += key + '=' + data[key] + '&'
});
if (dataStr !== '') {
dataStr = ing(0, dexOf('&'));