企业级vite配置方案——让vite得心应手

目录

01：前言

02：明确移动端和PC端的构建顺序

03：构建移动处理工具 MobileTerminal

04：通过 vueuse 优化处理方案

05：定义@软链接 

06：构建 VueRouter 移动端路由表

07：划分移动端首页模块

08：导入并配置 axios

09：vite 处理代理服务器

10：vite 处理环境变量

---

01：前言

        配置 vite 不能想当然的进行处理，而是需要依据业务来进行配置。 

        1. 先明确项目的业务处理方案

        2. 依据业务需要，来配置对应的 vite 内容

02：明确移动端和PC端的构建顺序

        因为咱们的项目是使用的tailwindcss 作为样式处理的核心库，所以我们的 构建顺序 需要尊重 tailwindcss 的构建顺序的。 

        那么在 tailwind 中，有这样一段内容：

移动优先

        默认情况下，Tailwind 使用移动优先断点系统，类似于您在其他框架（如 Bootstrap）中使用的系统。

        这意味着无前缀的实用程序(如`uppercase`）在所有屏幕尺寸上生效，而带前缀的实用程序（如`md:uppercase`）仅在指定的断点及以上生效。

        翻译过来就是 移动优先 的原则。也就是说，使用 tailwind 构建 响应式系统时，需要 先构建移动端，再构建 PC 端。而这个顺序，同样也是咱们项目的构建顺序。

03：构建移动处理工具 MobileTerminal

我们如何判断当前的设备是移动设备呢？

        为了达到这个目的，我们就需要先去构建出咱们的第一个工具方法：isMobileTerminal，该方法将返回一个 boolean 型的数据，如果为 true 则表示当前所在为 移动端，如果为 false 则表示当前为 PC 端。

        那么根据我们之前的构建方案，所以的工具方法需要被放入到 utils 中，所以下面我们首先需要在 utils 中创建一个工具类 flexible. js，在该方法中规定 屏幕宽度＜1280 则为移动设备，并且为了保证这个方法的灵活性，我们可以让它成为一个 计算属性，所以我们得出如下代码：

// src/constants/index.js中
// PC 设备指定宽度
export const PC_DEVICE_WIDTH = 1280

// src/utils/flexible.js

import { computed } from 'vue'
import { PC_DEVICE_WIDTH } from '../constants'

/**
* 判断当前是否为移动设备，判断依据为屏幕的宽度是否大于指定值 (1280)
*/
export const isMobileTerminal = computed(() => {
    return document.documentElement.clientWidth < PC_DEVICE_WIDTH
})

// src/App.vue
<template>
    <div>{{ isMobileTerminal }}</div>
</template>
<script setup>
import { isMobileTerminal } from './utils/flexible' 
</script>
<style lang="scss" scoped></style>

注意：因为我们要在后面进行 响应式的视图处理 所以此处通过 宽度 进行移动端判断！！！！

大家在实际开发中更建议通过以下代码来进行 是否为移动端的准确判断

/**
* 判断当前是否为移动设备
*/
export const isMobileTerminal = computed(() => {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
        navigator.userAgent
    )
})

04：通过 vueuse 优化处理方案

    网址：VueUse | VueUse 

npm i @vueuse/core@8.1.2

import { computed } from 'vue'
import { PC_DEVICE _WIDTH } from '../constants'
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()

/**
* 判断当前是否为移动设备，判断依据屏幕宽度是否小于一个指定宽度 (1280)
*/
export const isMobileTerminal = computed(() => {
    return width.value < PC_DEVICE_WIDTH
})

05：定义@软链接 

        vite 提供了resolve.alias 功能，表示：通过别名在指向一个具体的路径。那么我们就可以通过此配置来实现 @ 软链接功能。

在 vite.config. js 中

import { join } from 'path'

export default defineConfig({
    plugins: [vue()],
    // 软链接
    resolve: {
        alias: {
            '@': join(__dirname, '/src')
        }
    }
})

06：构建 VueRouter 移动端路由表

初始化 VueRouter

import { createRouter, createWebHistory } from 'vue-router' 
import { isMobileTerminal } from '@/utils/flexible' 
import mobileTerminalRoutes from './modules/mobile-routes' 
import pcTerminalRoutes from './modules/pc-routes'

//创建 vueRouter 实例
const router = createRouter({
    history: createWebHistory(),
    routes: isMobileTerminal.value ? mobileTerminalRoutes : pcTerminalRoutes
})

export default router

07：划分移动端首页模块

        创建 src/views/main/components/navigation/index.vue 组件，为 控制移动端和 PC 端的 navigation 展示组件

- main
- - components
- - - navigation
- - - - mobile
- - - - pc
- - - - index.vue
- - index.vue

<template>
    <mobile-navigation-vue v-if="isMobileTerminal"/>
</template>
<script setup>
    import { isMobileTerminal } from '@/utils/flexible' 
    import mobileNavigationVue from './mobile/index.vue'
</script>

08：导入并配置 axios

// 创建 src/utils/request.js

import axios from 'axios'

const service = axios.create({
    baseURL: import.meta.env.VITE_BASE_API,
    timeout: 5000
})

export default service

// 创建请求接口 src/api/category.js

import request from '@/utils/request'

/**
 * 获取分类列表
 */
export const getCategory = () => {
    return request({
        url: '/category'
    })
}

09：vite 处理代理服务器

在 vite.config.js 中新增 server 选项，代理配置

// https://vitejs.dev/config/

export default defineConfig{
    //代理
    server: {
        proxy: {
            // 代理所有 /api 的请求，该请求将被代理到 target 中
            '/api': {
                // 代理请求之后的请求地址
                target: 'https://api.imooc-front.lgdsunday.club/'
                // 跨域
                changeOrigin: true
            }
        }
    }
})

10：vite 处理环境变量

        在通常咱们的企业级项目开发之中，都会区分 开发时服务 和生产时服务。对于开发时服务而言，它内部的数据是 假数据，所以我们可以随便修改。而生产时服务，它内部数据为 真实数据，所以是不能随意修改的。

        那么在我们进行项目开发时，我们需要把服务切换为 DEV 模式，而在打包项目时需要切换为 PROD 模式。但是如果这个操作全靠人工切换，那么难免会有疏忽，一旦出现问题将会引起巨大的风险，所以我们期望可以 根据项目的状态，自动切换请求的服务地址。

        那么这样应该怎么做呢？在 vite 中提供了 .env 文件，该文件为环境变量文件，默认提供了四种文件格式：

.env                                 ＃ 所有情况下都会加载

.env.local                        ＃ 所有情况下都会加载，但会被 git 忽路

.env.[mode]                   ＃ 只在指定模式下加载

.env.[mode].local          ＃ 只在指定模式下加载，但会被 git 忽略

# .env.development
# 只在development模式下加载
# 只有以 VITE_ 为前缀的变量才会暴露给 vite 处理

VITE_BASE_API = '/api'

# .env.production

VITE_BASE_API = '/prod-api'

默认只有 VITE_ 为前缀的变量才会暴露出去，给 vite 进行处理。

获取：(import.meta.env.VITE_BASE_API)

Anywhere 包

        Anywhere 随启随用的静态文件服务器。Running static file server anywhere. 随时随地将你的当前目录变成一个静态文件服务器的根目录。