vue3-vite2项目的后续完善工作

继之前更新的文章从零开始搭建vue3项目，一些常用的配置都已经配置上，本文主要补充下几个常用的依赖：如lodash、nprogress、eslint和husky以及axios请求的封装。

vue3中引入常用工具库等

1. 安装eslint、airbnb风格、husky自动校验等插件，以及做好相关配置

2. 安装必要的依赖，cnpm i axios lodash nprogress --save等其它；

   • lodash是个JS工具库，封装了一系列常用的方法，例如防抖节流深拷贝等~
   • nprogress用于制定请求、路由跳转时的进度条。

vite.config.js的进一步配置以及axios请求封装

1. vite.config.js中配置更改，配置server：允许ip地址访问、配置端口号、增加env配置文件、配置跨域，以下为配置跨域的关键代码（配置跨域需要获取.env配置，可通过loadEnv(mode, process.cwd())来获取）

   注意：配置的.env文件中，配置项需要加前缀VITE_，这样才能在项目中通过import.meta.env来访问，VITE_为默认值，支持自定义，自定义通过envPrefix配置，注意不可为''

   vite.config.js中：

   export default ({ mode }) => {
     // 获取env配置文件的配置
     const env = loadEnv(mode, process.cwd());
     console.log('env: ', env)
   
     return defineConfig({
       server: {
         // 配置可通过ip地址访问
         host: '0.0.0.0',
         port: 8008,
         strictPort: true,
         cors: true,
         proxy: {
           '/service': {
             target: env.VITE_SERVER_URL,
             changeOrigin: true
             // rewrite: (path) => path.replace(/^\/service/, '/service')
           },
         } 
       },
       // ………………………………还有其它的配置项
     })
   }
   

2. axios请求的封装

import axios from "axios"

// 引入进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 引入element的message弹框 修正下：element-plus的message弹框应该这么引入
import { ElMessage } from 'element-plus'

const SuccessStatus = 200
const SuccessCode = 0;

const service = axios.create({
       baseURL: import.meta.env.VITE_BASE_API + import.meta.env.VITE_CORS_API,
       timeout: 15000,
       // 跨域访问时，允许保存cookie
       withCredentials: true 
})

service.interceptors.request.use(
       config => {
               console.debug('axios config: ', config)
               if(!config.noNProgress){
                       NProgress.start() 
               }
               return config;
       },
       error => {
               return Promise.reject(error)
       }
)

service.interceptors.response.use(
       res => {
               NProgress.done()
               if(res.config.responseType === 'blob'){
                       return res;
               }
               const { code, message, data} = res.data; 
               if(res.status === SuccessStatus && code === SuccessCode) {
                       return Promise.resolve(res.data)
               } else {
                       ElMessage({
                               message,
                               type: 'error'
                       })
                       return Promise.reject(res)
               }
       },
       error => {
               NProgress.done()
               return Promise.reject(error)
       }
)
export default service;

3. 以上之后，就可以在本地访问接口了，请求成功

最后

至此，基本配置的都已经配置上了（一些小配置就不一一列出来），其它的可根据需求自行补充

1. 下图为该项目至此的目录结构，接下来就要进入需求开发阶段啦

2. 下图为package.json中的依赖信息，整理了下，把没必要在生产环境中安装的依赖移动到开发中