Vue项目 跨域 解决方案与 vue

}

}

}

}

核心部分

如果没有vue.config.js文件，那就找到项目中config文件夹中的index.js文件

找到proxyTable{ }处，加上与上面一样的代码

此时停止vue项目，重新启动

解决跨域问题，请求成功。若项目打包上线可使用Nginx设置代理服务器。

vue.config.js标准配置

// vue.config.js

const path = require(‘path’);

const IS_PROD = [‘production’, ‘prod’].includes(process.env.NODE_ENV);

const resolve = (dir) => path.join(__dirname, dir);

module.exports = {

publicPath: process.env.NODE_ENV === ‘production’ ? ‘/site/vue-demo/’ : ‘/’, // 公共路径

indexPath: ‘index.html’ , // 相对于打包路径index.html的路径

outputDir: process.env.outputDir || ‘dist’, // ‘dist’, 生产环境构建文件的目录

assetsDir: ‘static’, // 相对于outputDir的静态资源(js、css、img、fonts)目录

lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码

runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本

productionSourceMap: !IS_PROD, // 生产环境的 source map

parallel: require(“os”).cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。

pwa: {}, // 向 PWA 插件传递选项。

chainWebpack: config => {

config.resolve.symlinks(true); // 修复热更新失效

// 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中

config.plugin(“html”).tap(args => {

// 修复 Lazy loading routes Error

args[0].chunksSortMode = “none”;

return args;

});

config.resolve.alias // 添加别名

.set(‘@’, resolve(‘src’))

.set(‘@assets’, resolve(‘src/assets’))

.set(‘@components’, resolve(‘src/components’))

.set(‘@views’, resolve(‘src/views’))

.set(‘@store’, resolve(‘src/store’));

},

css: {

extract: IS_PROD,

requireModuleExtension: false,// 去掉文件名中的 .module

loaderOptions: {

// 给 less-loader 传递 Less.js 相关选项

less: {

// globalVars 定义全局对象，可加入全局变量

globalVars: {

primary: ‘#333’

}

}

}

},

devServer: {

overlay: { // 让浏览器 overlay 同时显示警告和错误

warnings: true,

errors: true

},

host: “localhost”,

port: 8080, // 端口号

https: false, // https:{type:Boolean}

open: false, //配置自动启动浏览器

hotOnly: true, // 热更新

// proxy: ‘http://localhost:8080’ // 配置跨域处理,只有一个代理

proxy: { //配置多个跨域

“/api”: {

target: “http://172.10.10.12:3000”,

changeOrigin: true,

// ws: true,//websocket支持

secure: false,

pathRewrite: {

“^/api”: “”

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】