vue-h5-template/assets/guide_vue2_proxy.md.15278e21.js

import{_ as s,c as a,o as n,a as p}from"./app.3b30a875.js";const C=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-\u914D\u7F6E-proxy-\u8DE8\u57DF"}],"relativePath":"guide/vue2/proxy.md","lastUpdated":1660905131000}'),l={name:"guide/vue2/proxy.md"},o=p(`<h3 id="\u2705-\u914D\u7F6E-proxy-\u8DE8\u57DF" tabindex="-1"><span id="proxy">\u2705 \u914D\u7F6E proxy \u8DE8\u57DF </span> <a class="header-anchor" href="#\u2705-\u914D\u7F6E-proxy-\u8DE8\u57DF" aria-hidden="true">#</a></h3><p>\u5982\u679C\u4F60\u7684\u9879\u76EE\u9700\u8981\u8DE8\u57DF\u8BBE\u7F6E\uFF0C\u4F60\u9700\u8981\u6253\u6765 <code>vue.config.js</code> <code>proxy</code> \u6CE8\u91CA \u5E76\u4E14\u914D\u7F6E\u76F8\u5E94\u53C2\u6570</p><p><u><strong>!!!\u6CE8\u610F\uFF1A\u4F60\u8FD8\u9700\u8981\u5C06 <code>src/config/env.development.js</code> \u91CC\u7684 <code>baseApi</code> \u8BBE\u7F6E\u6210 &#39;/&#39;</strong></u></p><div class="language-javascript"><button class="copy"></button><span class="lang">javascript</span><pre><code><span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">devServer</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;">// ....</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#F07178;">proxy</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">            </span><span style="color:#676E95;">//\u914D\u7F6E\u8DE8\u57DF</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">/api</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">target</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://test.xxx.com</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// \u63A5\u53E3\u7684\u57DF\u540D</span></span>
<span class="line"><span style="color:#89DDFF;">                </span><span style="color:#676E95;">// ws: true, // \u662F\u5426\u542F\u7528websockets</span></span>
<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">changOrigin</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// \u5F00\u542F\u4EE3\u7406\uFF0C\u5728\u672C\u5730\u521B\u5EFA\u4E00\u4E2A\u865A\u62DF\u670D\u52A1\u7AEF</span></span>
<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#F07178;">pathRewrite</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">                    </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">^/api</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">                </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div><p>\u4F7F\u7528 \u4F8B\u5982: <code>src/api/home.js</code></p><div class="language-javascript"><button class="copy"></button><span class="lang">javascript</span><pre><code><span class="line"><span style="color:#89DDFF;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getUserInfo</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">params</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">return</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">request</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        url</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/api/userinfo</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">        method</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">post</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">        data</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">qs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">params</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div>`,6),e=[o];function c(t,r,D,F,y,A){return n(),a("div",null,e)}const d=s(l,[["render",c]]);export{C as __pageData,d as default};