幽灵资源网 Design By www.bzswh.com

最近在项目中使用了Vue CLI 3.0版本,项目中需要设置反向代理解决跨域问题,下面记录一下设置过程。

如何安装vue-cli3呢?

首先,你要有一个nodejs环境

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

其次,如果你之前安装了vue-cli的旧版本,那么你要做如下操作

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

假设你已有了nodejs环境,你可以通过下面指令安装vue-cli3的包

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。(例如 vue --version)

新建配置文件

在项目的根目录下新建 vue.config.js 文件,自Vue CLI 3开始,项目中所有的配置信息都写在这个文件中(2在config目录中配置)。

配置反向代理

设置代理

module.exports = {
 devServer: {
  // 设置代理
  proxy: {
   "/v1": {
    target: "http://127.0.0.1:8081/", // 域名
    ws: true, // 是否启用websockets
    changOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
    pathRequiresRewrite: {
     "^/v1": "/"
    }
   }
  }
 }
};

在请求中使用

// '/v1'等于'http://127.0.0.1:8081/v1'
// 此时请求地址为'http://127.0.0.1:8081/v1/picture"_blank" href="https://cli.vuejs.org/zh/config/#devserver-proxy" rel="external nofollow" >https://cli.vuejs.org/zh/config/#devserver-proxy

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
Vue,CLI3,反向代理,Vue-CLI,反向代理

幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?