Vue 簡(jiǎn)單配置公用接口地址方式

更新時(shí)間：2022年03月29日 14:58:05 作者：小火車(chē)況且況且況且

這篇文章主要介紹了Vue 簡(jiǎn)單配置公用接口地址方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

簡(jiǎn)單配置公用接口地址

有時(shí)候需要本地和線(xiàn)上需要不同的接口地址, 這個(gè)時(shí)候可以根據(jù) npm run build 判斷

首先配置

先新建一個(gè) config.js 的文件

開(kāi)發(fā)環(huán)境: 說(shuō)明在本地測(cè)試的時(shí)候鏈接的地址
測(cè)試環(huán)境: 說(shuō)明是根據(jù) npm run test 進(jìn)行判斷
生產(chǎn)環(huán)境: 說(shuō)明是已經(jīng)部署到線(xiàn)上的代碼 npm run build

let baseURL = ''
if (process.env.NODE_ENV === 'production') {
? ? //根據(jù).env文件中的VUE_APP_FLAG判斷是生產(chǎn)環(huán)境還是測(cè)試環(huán)境
? ? if (process.env.VUE_APP_TITLE === 'production') {
? ? ? ? //production 生產(chǎn)環(huán)境
? ? ? ? baseURL = 'http://192.168.10.111:8080/zhikong'
? ? } else {
? ? ? ? //test 測(cè)試環(huán)境
? ? ? ? baseURL = ''
? ? }
} else {
? ? //development 開(kāi)發(fā)環(huán)境
? ? baseURL = 'http://192.168.10.12:8080/zhikong'
}
export default baseURL

package.json 文件下的配置

根據(jù)不同的指示來(lái)說(shuō)明具體去調(diào)用哪個(gè)接口地址

{
? "scripts": {
? ? "serve": "vue-cli-service serve",
? ? // 根據(jù)不同的指示來(lái)說(shuō)明具體去調(diào)用那個(gè)接口地址
? ? "build": "vue-cli-service build --mode build",
? ? "test": "vue-cli-service build --mode test",
? ? "lint": "vue-cli-service lint"
? }
}

.env.build 和 .env.test 文件

在和 src 文件夾同級(jí)的根目錄下新建 .env.build 和 .env.test 文件

.env.build

NODE_ENV = 'production'
VUE_APP_TITLE = 'production'

.env.test

NODE_ENV = 'production'
VUE_APP_TITLE = 'test'

vue.config.js 文件配置

npm run build 根據(jù)環(huán)境生成不同打包的文件夾

const path = require('path')
function resolve (dir) {
? ? return path.join(__dirname, dir)
}
module.exports = {
? ? publicPath: './',
? ? // `npm run build` 根據(jù)環(huán)境生成不同打包的文件夾
? ? outputDir: process.env.VUE_APP_TITLE === 'production' ? 'dist-zhikong' : 'test',
? ? assetsDir: "",
? ? indexPath: 'index.html',
? ? filenameHashing: true,
? ? lintOnSave: false,
? ? runtimeCompiler: false,
? ? transpileDependencies: [],
? ? productionSourceMap: false,
? ? integrity: false,
? ? configureWebpack:{?
? ? ? ? resolve:{ ??
? ? ? ? ? ? alias:{
? ? ? ? ? ? ? ? '@': resolve('src'),
? ? ? ? ? ? }?
? ? ? ? }
? ? },
? ? devServer:{ ??
? ? ? ? port:8080,
? ? ? ? host:'0.0.0.0',
? ? ? ? open:true,
? ? ? ? https:false,
? ? ? ? overlay: {
? ? ? ? ? ? warnings: true,
? ? ? ? ? ? errors: true
? ? ? ? }
? ? }
}

vue接口路徑配置

在個(gè)人開(kāi)發(fā)中，大多說(shuō)vue的封裝是固定形式

是寫(xiě)在文件中，切不可更改

例：

URL: 'http://127.0.0.1:8182/',
axios()//方式
ajax()//方式

如何在項(xiàng)目封裝后依然可以更改？

創(chuàng)建文件

在根目錄下創(chuàng)建static文件夾（現(xiàn)版本要放在public中，哪個(gè)行用哪個(gè)）

并創(chuàng)建config.json文件

{
? "name": "static",
? "version": "1.0.0",
? "url": "http://127.0.0.1:8183/",
? "dependencies": {},
}

在json中可以放版本號(hào)，項(xiàng)目名、后臺(tái)路徑、以及文件路徑

axios獲取json文件內(nèi)容

使用async await進(jìn)行同步請(qǐng)求

export default async function request(config) {
//public/config.json
await axios.get('static/config.json').then(res => {
? ? console.log(res.data.url)
? ? URL = res.data.url
? })
axios()//方法
ajax()//方法
}

在這樣的請(qǐng)求的的時(shí)候，在 json文件不混亂的情況下，不需要考慮將內(nèi)容提前預(yù)置在vuex緩存中，差距人的反應(yīng)是感受不到的，甚至可能會(huì)因?yàn)槟撤N原因丟失就得不償失了

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: