Vue 簡單配置公用接口地址方式

更新時間：2022年03月29日 14:58:05 作者：小火車況且況且況且

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

簡單配置公用接口地址

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

首先配置

先新建一個 config.js 的文件

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

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

package.json 文件下的配置

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

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

.env.build 和 .env.test 文件

在和 src 文件夾同級的根目錄下新建 .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接口路徑配置

在個人開發(fā)中，大多說vue的封裝是固定形式

是寫在文件中，切不可更改

例：

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

如何在項目封裝后依然可以更改？

創(chuàng)建文件

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

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

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

在json中可以放版本號，項目名、后臺路徑、以及文件路徑

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

使用async await進行同步請求

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()//方法
}

在這樣的請求的的時候，在 json文件不混亂的情況下，不需要考慮將內(nèi)容提前預置在vuex緩存中，差距人的反應是感受不到的，甚至可能會因為某種原因丟失就得不償失了

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

您可能感興趣的文章: