Vue Cli3(代理配置)

cli3
vue ui 映射当前项目的配置,在浏览器内实现 GUI 操作:直接支持创建项目,配置文件
npm run dev 启动项目指令,在 Vue Cli 3 内会启动两个服务。一个是 localhost,另一个是当前 ip 下的地址:避免了手动配置需要修改,ip不一样不能启动器只能启动一个的弊端
npx 指令:启动服务可用 npx vue-cli-service serve — npx 会自动查找当前依赖包中的可执行文件,如果找不到,就会去 PATH 里找。如果依然找不到,就会临时创建用完即删掉
通过 cli3,vue ui是一个全局指令,在终端执行 vue ui 命令,就能得到 cli3 的项目管理页面:依赖管理,项目启动、编译,项目配置均是图形化操作
Vue是没有任何配置文件的,如果是修改配置可在GUI上直接修改,如果是需要增加配置,如配置 Nginx 代理实现跨域,则需要新建一个配置文件修改即可。

本地代理
在根目录下新建一个 vue.config.js 文件,拷贝如下代码

module.exports = {
    // cli3 代理是从指定的target后面开始匹配的,不是任意位置;配置pathRewrite可以做替换
    devServer: {
      proxy: {
        '/your api': {
          target: 'your server',
          changeOrigin: true,
          pathRewrite: { }
        }
      }
    }
  }

特别注意:your api 就是请求后台域名后的相同部分,我理解vue实现是key-value方式,此处如果是 “/test/api/”: { },那么请求的时候 /test/api/getUserInfo,就是地址 target + /test/api/getUserInfo,若请求key对应不上则代理就会无效了。

原文链接

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章