vue.config.js配置代理跨域。

浅浅一笑^*^

已于 2022-02-21 13:37:01 修改

阅读量4.1k

点赞数 2

分类专栏： vue项目遇到bug 文章标签： vue.js javascript 前端

于 2022-02-21 09:51:10 首次发布

本文链接：https://blog.csdn.net/weixin_46409887/article/details/123004793

版权

vue项目遇到bug 专栏收录该内容

27 篇文章

订阅专栏

module.exports = {
　　　　devServer: {
　　　　　　open: true,//vue项目启动时自动打开浏览器
　　　　　　host: 'localhost',//本机
　　　　　　port: 8080,//端口号
　　　　　　https: false,
　　　　　　//以上的ip和端口是我们本机的;下面为需要跨域的
　　　　　　proxy: {  //配置跨域
　　　　　　　　'/api': {
　　　　　　　　　　target: 'http://localhost:5001/api/',  //这里后台的地址模拟的;应该填写你们真实的后台接口
　　　　　　　　　　ws: true,
　　　　　　　　　　changOrigin: true,  //允许跨域
　　　　　　　　　　pathRewrite: {
　　　　　　　　　　　　'^/api': ''  //请求的时候使用这个api就可以
　　　　　　　　　　}
　　　　　　}
　　　　}
　　}
}

遇到的问题?
devServer设置 open为true，启动项目时浏览器自启两次。
解决方法:

将package.json中的scripts下的server属性配置后面添加--open即可解决问题。

在这里插入图片描述

devServer.disableHostCheck:
devServer.disableHostCheck配置项用于配置是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。 DevServer 默认只接受来自本地的请求，关闭后可以接受来自任何 HOST 的请求。它通常用于搭配–host 0.0.0.0使用，因为你想要其它设备访问你本地的服务，但访问时是直接通过 IP 地址访问而不是 HOST 访问，所以需要关闭 HOST 检查。

module.exports = {
  devServer: {
    disableHostCheck: true,
    port: 8080, // 端口号
    proxy: 'http://....' // 代理服务器（配置跨域处理,只有一个代理）
  },

  transpileDependencies: ['vue-world-map', 'vuetify'],
  lintOnSave: false,
//扩展插件
  pluginOptions: {
    i18n: {//中英文对照,设置为中文。
      locale: 'en',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableInSFC: false,
    },
  },
}

总结:设置中英文对照是下载过vue-i18n 提供了一个全局配置参数叫 “locale”，通过改变 locale 的值可以实现不同语种的切换。