vue3 新建项目 包括 vue-router vuex axios的配置

main.js

import {createApp} from 'vue'
import App from './App.vue'
import routes from "@/routes";
import {store} from '@/vuex'
import qs from 'qs'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.config.globalProperties.$store = store
app.config.globalProperties.$qs = qs
app.use(routes)
app.use(store)
app.use(ElementPlus)
app.mount('#app')

vue-router

index.js

// import VueRouter from 'vue-router'
import config from './config'
import { createRouter } from 'vue-router'
const router = createRouter(config)

export default router

config.js

import {createWebHashHistory} from 'vue-router'

export default {
    history: createWebHashHistory(),
    routes: [
        {
            path: '/',
            name: 'index',
            redirect: 'home',
            component: () => import('../views/index'),
            children: [
                {
                    path: 'home',
                    name: 'home',
                    component: () => import('../views/home/home')
                },
            ]
        },
        {
            path: '/test',
            name: 'test',
            component: () => import('../views/Test')
        },
        {
            path: '/:pathMatch(.*)*',
            name: '404',
            component: () => import('../views/NotFound')
        },
    ]
}

vuex

import {createStore} from 'vuex'

export const store = createStore({
    state: {
        name: '',
        count: 0,
        token: ''
    },
    mutations: {
        setName(state, data) {
            state.name = data
        },
        addCount(state) {
            state.count++
        },
        setToken(state, data) {
            state.token = data
        }
    },
})

axios

axios.js

import axios from 'axios'
import {BASE_URL} from "@/api/config";
import {store} from "@/vuex";

const service = axios.create({
    baseURL: process.env.NODE_ENV === 'production' ? BASE_URL : '/api/',
    timeout: 50000, // 请求超时uploadBuildExcel
    responseType: 'json',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
    },
})

service.interceptors.request.use(config => {
    if (!config.headers.token) {
        config.headers.token = store.state.token
    }
    return config
})

export default service

config.js axios请求的地址

export const BASE_URL = process.env.VUE_APP_API_BASE_URL

.env

VUE_APP_API_BASE_URL=http://du.ys-n.com/api/