webpack : vue-cli 腳手架環(huán)境 代理服務(wù)器的配置

注意：本進(jìn)階在webpack進(jìn)階【18】的基礎(chǔ)上進(jìn)行衍生览效。

一罪佳、vue-cli為什么要進(jìn)行代理服務(wù)器（也叫反向代理）

• 1. 在開(kāi)發(fā)環(huán)境中逛漫，前端瀏覽器，運(yùn)行代碼赘艳，localhost:3000/...酌毡， 請(qǐng)求后臺(tái)服務(wù)器： localhost:8080/... 這時(shí)候克握，會(huì)有【跨域】的問(wèn)題出現(xiàn)。
• 2. 跨域：域名枷踏、端口菩暗、協(xié)議、不同旭蠕，就會(huì)出現(xiàn)跨哉現(xiàn)象停团。
• 3. webpack 的反向 代理，可以起一個(gè)臨時(shí)的代理服務(wù)器掏熬，幫助解決在【開(kāi)發(fā)過(guò)程中】出現(xiàn)的跨域問(wèn)題佑稠，這時(shí)候就能拿到后臺(tái)的數(shù)據(jù)了。現(xiàn)在我們?cè)诒镜匕l(fā)起一個(gè)請(qǐng)求試試旗芬。

二讶坯、安裝 axios，發(fā)送 ajax 請(qǐng)求

npm i axios -D

三岗屏、在 home.vue 中引入 axios ，并 發(fā)送 請(qǐng)求

我們要請(qǐng)求 這個(gè)網(wǎng)址的數(shù)據(jù)
http://order.xmvogue.com/word/public/index.php?s=/home/goods/get_off_list

<template>
  <div class="home">
      <div class="box">
          這是一個(gè) home 組件
      </div>
  </div>
</template>

<script>
import axios from 'axios'  // 引入axios

export default {
    async created() {
        const url = `/word/public/index.php?s=/home/goods/get_off_list`;
        const res = await axios.get(url)
        console.log(res)
    }
}
</script>
<style lang="less">
    .box{
        font-size: 20px;
        width: 200px;
        height: 200px;
        background: pink;
    }
</style>

四漱办、vue.config.js 代理服務(wù)器配置

module.exports = {
    devServer: {
        port: 3000,    // 瀏覽器打開(kāi)的端口
        open: true,    // 是否自動(dòng)打開(kāi)瀏覽器
        // 配置代理服務(wù)器这刷，進(jìn)行代理數(shù)據(jù)
        proxy: {
            // 以后在開(kāi)發(fā)過(guò)程中，只要請(qǐng)求的路徑娩井，以 /music 開(kāi)頭暇屋，都會(huì)被代理。
            // 如果 請(qǐng)求時(shí)前面加了 /music, 代理也需要加上 /music
            '/': {
                target: 'http://order.xmvogue.com/', // 代理的基礎(chǔ)路徑
                pathRewrite: {'^/': ''}         // 如果你不想始終傳遞 /music 洞辣，則需要重寫(xiě)路徑：
            }
        }
    },
    // rem 的配置
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-px2rem') ({
                        // 適配 375 屏幕咐刨， 設(shè)計(jì)圖 750 中量出來(lái)的尺寸要 除以 2
                        // 配置成 37.5 是為了兼容 沒(méi)有適配 rem 布局的第三方 ui 庫(kù)
                        remUnit: 37.5
                    })
                ]
            }
        }
    }
}

五、現(xiàn)在我們重新啟動(dòng)本地開(kāi)發(fā)腳本

npm run serve

六扬霜、經(jīng)過(guò)反向代理后定鸟，我們能拿到后臺(tái)的數(shù)據(jù)。

image.png

七著瓶、home.vue 和 vue.config.js 中也可以如下寫(xiě)法

• 1. home.vue

     
     
     image.png
• 2. vue.config.js联予，我們要請(qǐng)求的 http://order.xmvogue.com/word/public/index.php?s=/home/goods/get_off_list 沒(méi)有 music，所以它會(huì)被 pathRewrite中替換掉材原。
     
     image.png

• 3. 再重新運(yùn)行下本地腳本 【npm run serve 】會(huì)發(fā)現(xiàn)沸久，依然能夠獲取到后臺(tái)的數(shù)據(jù)。

     
     
     image.png
     
     
     image.png