OJ-03--vite.config.js 配置. axi

前言

配置好了env,接下来做一些vite配置的完善,这里的流程思路是根据当前 env中的Mode值, 来确定当前的环境, 在根据不同的环境做一些不同的配置.

这里以当环境是测试环境或者生产环境时, 请求数据需要访问服务端的ip和端口,因此需要跨域,并且关闭mock, 而开发环境,可以不需要配置跨域.

当然后续随着开发不断的迭代, 还需要做更多不同的配置, 这里先不展开 ,等遇到了,再进行补充.

对于env环境配置不明白的同学,这里有个传送门

当前的 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {viteMockServe} from "vite-plugin-mock";
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      vue(),
      viteMockServe({
        // ↓解析根目录下的mock文件夹
        mockPath: "./mock",
        // localEnabled: env.VITE_API_CLOSE_MOCK === undefined || env.VITE_API_CLOSE_MOCK !== 'YES',  // 开发打包开关
        prodEnabled: false, // 生产打包开关
        supportTs: false, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。
        // watchFiles: true, // 监视文件更改
      }),
      AutoImport({
          resolvers: [ElementPlusResolver()],
      }),
      Components({
          resolvers: [ElementPlusResolver()],
      }),
  ],
})

为了更加灵活的配置我们使用箭头函数, 并返回 conifg,在此之前,我们先创建一个/src/core/config.js:

/*/src/core/config.js*/
const config = {
    appName : 'OJS',
    // appLogo: 'https://www.com/img'
    showViteLogo : true,
}

export const viteLogo = (env) =>{
    if(config.showViteLogo){
        console.log(`>>>>>> 欢迎使用 ${env.VITE_APP_NAME}系统`)
        let enviStr = '生产环境'
        if (env.VITE_MODE_NAME === 'dev'){
            enviStr = '开发环境'
        }else if(env.VITE_MODE_NAME === 'test'){
            enviStr = '测试环境'
        }
        console.log(`>>>>>>  当前环境为:${enviStr}`)
        console.log(`>>>>>>  接口地址为:${env.VITE_API_HOST}`)


    }
}

export default config

这个函数主要是在终端输入指令的时候,给出一些友好的提示, 告知当前环境信息.

完善 config

再把 vite.config.js 改成如下:

import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import {viteMockServe} from "vite-plugin-mock";
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import {viteLogo} from "./src/core/config.js";
import path from "path";

export default({command,mode})=>{
    const env  = loadEnv(mode, process.cwd());
    viteLogo(env)

    const timestamp = Date.parse(new Date());
    const config = {
        plugins: [
            vue(),
            //按需引入
            AutoImport({
                resolvers: [ElementPlusResolver()],
            }),
            Components({
                resolvers: [ElementPlusResolver()],
            }),
            viteMockServe({
                // ↓解析根目录下的mock文件夹
                mockPath: "./mock",
                localEnabled: env.VITE_MODE_NAME === 'dev',  // 开发打包开关
                // prodEnabled: false, // 生产打包开关
                supportTs: false, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。
                // watchFiles: true, // 监视文件更改
            }),
        ],
        resolve: {
            // ↓路径别名，主要是这部分
            alias: {
                "@": path.resolve(__dirname, "./src")
            }
        },
    }
    //如果是test模式或者prod模式 需要配置跨域 与后端的服务器地址进行通信
    if(env.VITE_MODE_NAME === 'test' || env.VITE_MODE_NAME === 'prod'){
        console.log(`>>>>>> 跨域配置已开启!`)
        config.server={
            proxy: {
                '/api': {
                    target: env.VITE_API_HOST,    // 目标接口前缀
                    //ws: true,       //  代理webscoked
                    changeOrigin: true,   // 开启跨域
                    rewrite: (path) => path.replace(//api/, '')  // 路径重写
                }
            }
        }
    }
    return config;
}

第10行箭头函数两个参数解释

在开发环境下 command 的值为 serve（在 CLI 中， vite dev 和 vite serve 是 vite 的别名），而在生产环境下为 build（vite build）。

ssrBuild 仍是实验性的。它只在构建过程中可用，而不是一个更通用的 ssr 标志，因为在开发过程中，我们唯一的服务器会共享处理 SSR 和非 SSR 请求的配置。某些工具可能没有区分浏览器和 SSR 两种构建目标的命令，那么这个值可能是 undefined，因此需要采用显式的比较表达式。