vue3项目axios、router路由、build打包

项目源使用上一篇对应文章中新建的vite+vue3项目框架，继续追更对应的请求、路由以及打包

---

上一篇文章对应链接：vite+vue3+vant H5手机端应用项目快速搭建-CSDN博客文章浏览阅读26次。记录如何使用vite创建vue3项目并且安装vant4基础项目快速搭建https://blog.csdn.net/qq_45809464/article/details/140764631?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22140764631%22%2C%22source%22%3A%22qq_45809464%22%7D

vue-router路由安装

执行命令：npm install vue-router
+ vue-router@4.4.0
added 2 packages from 2 contributors in 1.969s

6 packages are looking for funding
  run `npm fund` for details

1、安装完vue-router之后我们在src下新建 router/index.ts文件, 注意源项目使用的vue3+ts，这个地方也要是ts不要写成js

└─src
    ├─assets
    ├─components
    └─router
        ├─index.ts

2、新建路由页面，我们在 src文件夹下新建 page/home.vue

<script setup lang="ts">
</script>

<template>
  <div>
    home
  </div>
</template>

<style scoped>
</style>

3、改写一下App.vue作为我们路由的主入口

<script setup lang="ts">
</script>

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<style scoped>
</style>

4、现在对router/index.ts暴露路由，并且配置我们的路由页面

import {createRouter,createWebHashHistory} from 'vue-router'
import Home from '../page/Home.vue'


const router = createRouter({
	history:createWebHashHistory(),//采用hash减少后端开发量
	routes:[
		{
			path:'/home',
			component:Home
		}
	]
})
export default router;

5、在main.ts中引入我们的路由组件，注意我们这个项目引用了 vant4如果你的项目中没有就把关于vant4的引入删除掉

import { createApp } from 'vue'
import router from './router/index'
import './style.css'
import App from './App.vue'
import 'vant/lib/index.css';
import { Button } from 'vant'
let app = createApp(App)
app.use(Button)
app.use(router)
app.mount('#app')

最后我们执行 npm run dev ， 在浏览器中访问http://localhost:5173/#/home显示的是我们home页的信息就是安装配置完毕了

Axios安装

执行命令：npm install axios
+ axios@1.7.2
added 9 packages from 25 contributors in 2.477s

7 packages are looking for funding
  run `npm fund` for details

1、对 axios 进行封装 ，我们在 src下新建 config/http.ts 文件

import axios from "axios";

let timeout = 60000;
let baseUrl = "";

//创建axios实例
const instance = axios.create({
    baseURL: baseUrl,
    timeout: timeout,
    headers: { 'Content-Type': 'application/json' }
});

//请求拦截器
instance.interceptors.request.use(async (config) => {
    //在此处写请求通用逻辑，一般是将token、app等全局信息配置在header上面
    // if (store.getters.token) {
    //   config.headers['Authorization'] = `Bearer ${store.getters.token}`;
    // }
    return config;
}, (error: any) => {
    // 对请求错误做些什么
    return Promise.reject(error);
});
//响应拦截器
instance.interceptors.response.use(async (res) => {
    //此处写后端接口响应过来的统一处理，一般做权限、错误提示等
    return res
}, (error: any) => {
    // 对响应错误做点什么
    if (error.response) {
        // 服务器返回了错误信息
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
    } else if (error.request) {
        // 请求已经发出，但没有收到响应
        console.log(error.request);
    } else {
        // 设置请求时触发了错误
        console.log('Error', error.message);
    }
    return Promise.reject(error);
});


const http = {
    /** get 请求
     * @param  {接口地址} url
     * @param  {请求配置} config
     */
    get(url: string, config: object) {
        return new Promise((resolve, reject) => {
            instance
                .get(
                    url,
                    config
                )
                .then((response) => {
                    if (response)
                        resolve(response.data);
                })
                .catch((error) => {
                    reject(error);
                });
        });
    },
    /** post 请求
     * @param  {接口地址} url
     * @param  {请求数据} data
     * @param  {配置} config
     */
    post(
        url: string,
        data: object,
        config: object
    ) {
        return new Promise((resolve, reject) => {
            instance
                .post(url, data, {
                    headers: config,
                })
                .then((response) => {
                    if (response) resolve(response.data);
                })
                .catch((error) => {
                    reject(error);
                })
                .finally(() => { });
        });
    }
};
export default http;

Build打包

1、vite默认打包命令是执行 npm run build, 因为在不同环境下我们要请求不同的地址以及一些不同的参数，避免在config配置文件中来回切换，我们在命令上实现自动化，在执行某个 npm 命令时自动选择我们需要的环境变量

2、在根目录下创建 .env.dev 、.env.pro、.env.test 三个不同环境的文件

.env.dev (开发环境)

#开发环境可用
NODE_ENV = dev
VITE_API_URL = "http://127.0.0.1/lkb"

.env.test (测试环境)

#开发环境可用
NODE_ENV = test
VITE_API_URL = "http://***.***.***/lkb"

.env.pro (生产环境)

#开发环境可用
NODE_ENV = pro
VITE_API_URL = "http://***.***.***/lkb"

自己要定义自己的变量前缀需要是 VITE_APP

3、在ts或js 文件中我们使用 import.meta.env. 来获取我们的变量值，更新一下 axios 封装的 http 文件中的请求地址

http.ts

import axios from "axios";

let timeout = 60000;
let baseUrl = import.meta.env.VITE_API_URL

//创建axios实例
const instance = axios.create({
    baseURL: baseUrl,
    timeout: timeout,
    headers: { 'Content-Type': 'application/json' }
});

4、修改编译命令, 我们分别指定不同环境的编译运行命令

package.json

  "scripts": {
    "dev": "vite --mode dev",
    "dev:test": "vite --mode test",
    "dev:pro": "vite --mode pro",
    "build": "vue-tsc -b && vite build --mode test",
    "build:pro": "vue-tsc -b && vite build --mode pro",
    "preview": "vite preview"
  },

这样就完成了对路由已经AXIOS的安装配置

学习交流扫码进群