vue中前端配置跨域

最新推荐文章于 2025-06-25 16:04:19 发布

moxiaoxiao520

最新推荐文章于 2025-06-25 16:04:19 发布

阅读量539

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue-cli3 ajax跨域问题 vue js

本文为博主学习笔记，欢迎大家收藏学习

本文链接：https://blog.youkuaiyun.com/qq_21161977/article/details/112390052

Vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在Vue-cli3项目根目录下创建vue.config.js文件并进行配置的方法。包括基础路径、输出目录等常规配置，以及webpack的开发和生产环境配置。还给出了开发服务器的配置，重点展示了通过proxy配置解决ajax跨域问题的具体设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在整个项目根目录下创建vue.config.js，这个文件，然后写入

const path = require('path')
const debug = process.env.NODE_ENV !== 'production'

module.exports = {
baseUrl: '/', // 根域上下文目录
outputDir: 'dist', // 构建输出目录
assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
lintOnSave: false, // 是否开启eslint保存检测，有效值：ture | false | 'error'
runtimeCompiler: true, // 运行时版本是否需要编译
transpileDependencies: [], // 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名
productionSourceMap: true, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
configureWebpack: config => { // webpack配置，值位对象时会合并配置，为方法时会改写配置
if (debug) { // 开发环境配置
config.devtool = 'cheap-module-eval-source-map'
} else { // 生产环境配置
}
// Object.assign(config, { // 开发生产共同配置
// resolve: {
// alias: {
// '@': path.resolve(__dirname, './src'),
// '@c': path.resolve(__dirname, './src/components'),
// 'vue$': 'vue/dist/vue.esm.js'
// }
// }
// })
},
chainWebpack: config => { // webpack链接API，用于生成和修改webapck配置，https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
if (debug) {
// 本地开发配置
} else {
// 生产开发配置
}
},
parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
pluginOptions: { // 第三方插件配置
},
pwa: { // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
},
devServer: {
open: true,
host: 'localhost',
port: 8081,
https: false,
hotOnly: false,
proxy: { // 配置跨域
'/api': {
target: 'http://localhost:5001/api/',
ws: true,
changOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
before: app => { }
}
}