概述
从0打造通用的后台管理系统，系列的第2篇博客，开发环境Node Yarn Vite的开发环境，这是记录的学习笔记，这篇主要分享环境配置、封装(路由、axios、storage)等内容。
环境配置
软件项目都会经历本地开发、测试服、生产环境不同的运行环境，项目在最开始的时候都会定义config文件，对环境进行区分，方便切换环境，提高工作中的开发效率,也可以在本地部署自己的mock环境，我的项目后期会使用PHP作为后端服务，实现Api接口。
代码语言：html复制const env = import.meta.env.MODE || 'prod'
const EnvConfig = {
dev:{
baseApi:'/',
mockApi:''
},
test:{
baseApi:'',
mockApi:''
},
prod:{
baseApi:'',
mockApi:''
}
}
export default {
env:'dev',
mock:true,
...EnvConfig[env]
}使用Config 配置的环境,比如可以在封装在axios中的引用：
代码语言：txt复制import config from "../config";
//在axios中的引用
const service = axios.create({
baseURL: config.baseApi,
timeout: config.timeout
})路由封装
一个项目，最开始的时候都要配置好路由环境，路由跳转的三种方式(router-link 、传统跳转 、Composition API跳转)，我们分别去分步骤讲解和实现它们：
1. main.js 全局加载路由加载路由的过程就相当于引入文件。
代码语言：txt复制import router from './router';
app.use(router).mount('#app')2.在App.vue的文件需要引入router组件。
代码语言：txt复制<template>
<router-view></router-view>
</template>3.使用
router-link 方式
代码语言：txt复制<router-link to="/login">登录</router-link>传统跳转
代码语言：txt复制<template>
<el-button @click="goHome">回首页</el-button>
</template>
<script>
export default {
name:'login',
methods:{
goHome(){
this.$router.push('/welcome')
}
}
}
</script>Composition API跳转:
代码语言：txt复制<script setup>
import { useRouter } from 'vue-router'
let router = useRouter()
const goHome = ()=>{
router.push('/welcome')
}
</script>封装axios
封装axios更能提高效率，对Http 请求(request)、响应(response)进行token验证，和返回参数拦截。
代码语言：txt复制import axios from "axios";
//创建axios实例对象，添加全局配置
const service = axios.create({
baseURL: config.baseApi,
timeout: 8000
})
//请求拦截
service.interceptors.request.use((req) => {
//请求拦截具体逻辑代码实现
return req;
})
//响应拦截
service.interceptors.response.use((res) => {
//响应拦截具体逻辑代码实现
})
function request(options){
options.method = options.method || 'get'
if(options.method.toLowerCase() === 'get'){
options.params = options.data;
}
if(config.env === 'prod'){
service.defaults.baseURL = config.baseApi
} else {
service.defaults.baseURL = config.mock ? config.mockApi : config.baseApi
}
return service(options)
}
['get','post','put','delete','patch'].forEach((item) => {
request[item] = (url,data,options) => {
return request({
url,
data,
method:item,
...options
})
}
})
export default request;在控制器中的使用的时候 在main.js中全局导入组件，使用：
代码语言：txt复制app.config.globalProperties.$request = request;this.$request({
method: 'get',
url: 'http://192.168.88.140/test.php',
}).then((res) => {
console.log(res)
})
