5分钟搭建 vite + vue3 工程，简单，实用！

创建 vite 项目

执行创建命令

执行 vite 项目创建命令，在创建导航过程中，选择 vue+ts 模式。

npm create vite

修改 vite 配置文件

当以命令行方式运行 vite 时，vite 会自动解析项目根目录下名为 vite.config.js 的文件。这里，我们简单设置一下将 @ 指向 src 以及开发时与后端联调必须进行的proxy代理设置。其它配置参数可参考官网。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 编辑器提示 path 模块找不到，可以yarn add @types/node --dev

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
    }
  },
  server: {
    port: 3000, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    // 代理
    proxy: {
      '/api': {
        target: 'http://API网关所在域名',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  }
})

安装 vue-router@4

执行安装命令

npm i vue-router@4

创建router文件

创建 src/router/index.ts 文件，创建路由时，建议使用路由懒加载，优化访问性能。

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        component: () => import('@/views/Home.vue') // 建议进行路由懒加载，优化访问性能
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

引入router

在 main.ts 文件中 vue 示例中 use router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
createApp(App).use(router).mount('#app')

安装axios

执行安装命令

npm i aixos

创建公共请求方法

我们将工具类方法放到 utils 文件夹中，创建文件 src/utils/request.ts

import axios from 'axios'

// 创建axios实例
const service = axios.create({
  // baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 5000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  config => {
     // 统一添加请求头
    return config
  },
  error => {
    console.log(error) 
    Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  response => {
     // 判断状态码做统一操作
    return response.data
  },
  error => {
    console.log('err' + error)
    return Promise.reject(error)
  }
)

export default service

安装 pinia

执行安装命令

npm i pinia

创建pinia文件

创建 src/store/index.ts 文件，创建pinia

import { defineStore } from 'pinia'
const store = defineStore('store', {
    state: () => {
        return {
            num: 1
        }
    },
    getters: {

    },
    actions: {

    }
})
export default store

引入pinia

在 main.ts 文件中 vue 示例中 use router

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
createApp(App).use(createPinia()).mount('#app')

使用

<template>
  {{ $store.num }}
</template>

<script setup lang="ts">
import store from '@/store/index.ts'
const $store = store()
</script>

<style scoped lang="less">
</style>

环境变量配置

创建.env.development和.env.production文件

使用

const BASEURL = import.meta.env.VITE_APP_BASEURL