我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Vue配置文件vue.config.js配置前端代理方式

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Vue配置文件vue.config.js配置前端代理方式

vue配置文件vue.config.js配置前端代理

将此代码片段命名为 vue.config.js,放在项目根目录即可

仅需修改target属性要访问的接口IP即可

<br>// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分,具体配置参考文档
module.exports = {
    // 部署生产环境和开发环境下的URL。
    // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
    //例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 baseUrl 为 /my-app/。
    //baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath
    //baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
    publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
     
    // outputDir: 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)
    outputDir: "mycli3",
    //用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
    assetsDir: "assets",
    //指定生成的 index.html 的输出路径 (打包之后,改变系统默认的index.html的文件名)
    // indexPath: "myIndex.html",
    //默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
    filenameHashing: false,
     
    // lintOnSave:{ type:Boolean default:true } 问你是否使用eslint
    lintOnSave: true,
    //如果你想要在生产构建时禁用 eslint-loader,你可以用如下配置
    // lintOnSave: process.env.NODE_ENV !== 'production',
     
    //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。(默认false)
    // runtimeCompiler: false,
     
    
    productionSourceMap: false,
     
    // 它支持webPack-dev-server的所有选项
    devServer: {
    host: "0.0.0.0",
    port: 8080, // 端口号
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
     
    // 配置多个代理
    proxy: {
    "/api": {
    target: "http://192.168.x.xxx:8090", // 要访问的接口域名
    ws: true, // 是否启用websockets
    changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
    pathRewrite: {
    "^/api": "" //这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add',直接写'/api/user/add'即可
    }
    }
    }
    }
    };

vue前端vue.config.js简介

vue.config.js

vue项目的配置文件,需要严格遵照 JSON 的格式来写。结构如下:

module.exports = {
  // 选项...
}

publicPath

部署应用包时的基本 URL。例如 https://www.my-app.com/,则publicPath

则为“/”,如果应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath 为 /my-app/。

outputDir

当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录的内容在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。

assetsDir

放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。

devServer

在开发环境下API 请求的代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。生产环境一般由Nginx负责。

process.env.VUE_APP_BASE_API

由于我们的项目需要在不同环境下进行运行(开发,生产,测试等),这避免我们需要多次的去切换请求的地址以及相关的配置,vue-cli2是可以直接在config文件中进行配置的,但是vue-cli4和vue-cli3已经简化了,没有config文件怎么办?

建立.env系列文件

首先我们在根目录新建3个文件,分别为.env.development,.env.production,.env.test

注意文件是只有后缀的。

  • .env.development 模式用于serve,开发环境,就是开始环境的时候会引用这个文件里面的配置
  • .env.production 模式用于build,线上环境。
  • .env.test 测试环境

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Vue配置文件vue.config.js配置前端代理方式

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Vue配置文件vue.config.js配置前端代理方式

这篇文章主要介绍了Vue配置文件vue.config.js配置前端代理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-03-19

Vue文件vue.config.js配置前端代理的方法是什么

本篇内容主要讲解“Vue文件vue.config.js配置前端代理的方法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue文件vue.config.js配置前端代理的方法是什么”吧!vu
2023-07-05

vue 3.0 vue.config.js文件常用配置方式

这篇文章主要介绍了vue 3.0 vue.config.js文件常用配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-03-19

vue配置代理vue.config.js后不生效如何解决

本文小编为大家详细介绍“vue配置代理vue.config.js后不生效如何解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue配置代理vue.config.js后不生效如何解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一
2023-07-05

vue3.0 vue.config.js文件常用配置方法是什么

这篇文章主要介绍“vue3.0 vue.config.js文件常用配置方法是什么”,在日常操作中,相信很多人在vue3.0 vue.config.js文件常用配置方法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对
2023-07-05

vue配置代理vue.config.js后不生效的解决(小坑)

这篇文章主要介绍了vue配置代理vue.config.js后不生效的解决(小坑),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-03-20

nginx配置代理多个前端资源

本文主要介绍了nginx配置代理多个前端资源,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-05-15

nginx怎么配置代理多个前端资源

这篇文章主要介绍了nginx怎么配置代理多个前端资源的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇nginx怎么配置代理多个前端资源文章都会有所收获,下面我们一起来看看吧。背景两套不同的前端使用同一个后端服务,
2023-07-06

web前端:webpack加载css文件及其配置

编程学习网:css样式可以直接存储于html网页或者单独的样式单文件。无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。外部使用时,样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
web前端:webpack加载css文件及其配置
2024-04-23

阿里云 ss代理 配置文件

在阿里云中,代理是一种虚拟的软件,可以被用来连接到云服务器上运行的应用程序,实现更快的计算性能和更低的成本。在使用代理的过程中,我们需要进行相关的配置文件设置,以确保代理能够正确地运行。首先,在阿里云的配置文件中,需要设置一个“连接”字段,用于指定连接到的服务器IP地址和端口号。这是因为代理是通过这个字段进行通信的,如
阿里云 ss代理 配置文件
2023-10-28

解析Pytest3种配置文件方式

本文介绍了解析Pytest配置文件的3种方式:命令行参数:方便快捷,但配置选项有限。.ini文件:提供更广泛的配置选项,可重用和共享。Python模块:完全可定制,可实现复杂的配置需求。选择合适的方式取决于测试项目的需求和复杂性:简单项目:命令行参数需要高级配置:.ini文件或Python模块高度可定制和可重用:Python模块
解析Pytest3种配置文件方式
2024-04-02

编程热搜

目录