Vue配置公用接口地址
小火车况且况且况且 人气:0简单配置公用接口地址
有时候需要本地和线上需要不同的接口地址, 这个时候可以根据 npm run build 判断
首先配置
先新建一个 config.js 的文件
- 开发环境: 说明在本地测试的时候链接的地址
- 测试环境: 说明是根据 npm run test 进行判断
- 生产环境: 说明是已经部署到线上的代码 npm run build
let baseURL = '' if (process.env.NODE_ENV === 'production') { //根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境 if (process.env.VUE_APP_TITLE === 'production') { //production 生产环境 baseURL = 'http://192.168.10.111:8080/zhikong' } else { //test 测试环境 baseURL = '' } } else { //development 开发环境 baseURL = 'http://192.168.10.12:8080/zhikong' } export default baseURL
package.json 文件下的配置
根据不同的指示来说明具体去调用哪个接口地址
{ "scripts": { "serve": "vue-cli-service serve", // 根据不同的指示来说明具体去调用那个接口地址 "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 根据环境生成不同打包的文件夹
const path = require('path') function resolve (dir) { return path.join(__dirname, dir) } module.exports = { publicPath: './', // `npm run build` 根据环境生成不同打包的文件夹 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接口路径配置
在个人开发中,大多说vue的封装是固定形式
是写在文件中,切不可更改
例:
URL: 'http://127.0.0.1:8182/', axios()//方式 ajax()//方式
如何在项目封装后依然可以更改?
创建文件
在根目录下创建static文件夹(现版本要放在public中,哪个行用哪个)
并创建config.json文件
{ "name": "static", "version": "1.0.0", "url": "http://127.0.0.1:8183/", "dependencies": {}, }
在json中可以放版本号,项目名、后台路径、以及文件路径
axios获取json文件内容
使用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文件不混乱的情况下,不需要考虑将内容提前预置在vuex缓存中,差距人的反应是感受不到的,甚至可能会因为某种原因丢失就得不偿失了
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容