简单的记录一下在vite.config中的配置，以便以后的查看，还在完善中.....

编程语言 2022-06-28 16:48:24 阅读次数: 0

vite.config.js 配置

一、修改环境变量类型错误的问题

在创建vite项目的时候，发现了一个问题，环境变量的类型错误的问题，不是到同志们有没有遇到环境变量类型错误的问题

image.png

在环境变量.env中定义了三个变量，其中一个是数字一个是布尔值，但是当在打印的时候，发现这两个值类型并不是和我预期的一样，当在环境变量里面定义一个类型为布尔的值的时候，往往是需要的是，通过这个环境变量去判断一些内容，比如说我在自己搭建的项目中分别创建了.env.development、.env.production、.env.test环境变量文件，里面定义了一个VITE_MOCK_ENABLE变量，通过这个去判断，在什么环境下我才开启mock数据，当然不仅仅用于判断这个。

image.png

我的实现方式

  1. 我这里使用了lodash，当然可以不使用这个
// 我自己的实现方式 (文件路径 vite/utilsEev.js)
import _ from 'lodash';
export default function parseEnv(env) { 
  const envs = _.cloneDeep(env)
  Object.entries(env).forEach(([key, value]) => {
    if (value == 'true' || value == 'false') envs[key] = value == 'true' ? true : false
    else if (/^\d+$/.test(value)) envs[key] = Number(value)
    else if (value == 'null') envs[key] = null
    else if (value == 'undefined') envs[key] = undefined
  })
  return envs
}
复制代码
  1. 在配置vite.config.js之前，需要将他导出的方式更改一下，将以函数的形式导出

vite官方文档位置 cn.vitejs.dev/config/#con…

vite官方文档位置 cn.vitejs.dev/config/#asy…

// vite.config.js 中的配置
import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd())
  return {
     plugins: [vue()] 
  }
})

复制代码
  1. 将方法引入到vite.config.js中进行使用
import { defineConfig, loadEnv } from 'vite'
import parseEnv from './vite/utilEev'
import vue from '@vitejs/plugin-vue'
export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = parseEnv(loadEnv(mode, process.cwd()))
  console.log(env) // 打印环境变量被处理后的值
  console.log(typeof env.VITE_NUMBER);
  console.log(typeof env.VITE_BOOL);
  return {
     plugins: [vue()] 
  }
})
复制代码

再次打印 image.png

  1. 到这里其实还并没有结束，配置完上面的内容，虽然是类型正确了，但是只能在vite.config.js中，环境变量类型是正确的，但是当我们在组件内使用环境变量的时候，就会出现这个问题，组件内部依然不能正确的得到环境变量正确的类型

参考 vite官网，组件内使用环境变量的方式 cn.vitejs.dev/guide/env-a…

image.png

  1. 解决这个可以将上一步写好的方法在复制一份，放在src 下面，我是这样的，如果你觉得这样麻烦，完全可以写一个公共的，将两种获取环境变量的方式分别传递给这个方法，处理环境变量类型错误的问题
// 环境变量处理 (文件位置 src/utils/env.js)
import _ from 'lodash'
const env = _.cloneDeep(import.meta.env)

Object.entries(import.meta.env).forEach(([key, value]) => {
  if (value == 'true' || value == 'false') env[key] = value == 'true' ? true : false
  else if (/^\d+$/.test(value)) env[key] = Number(value)
  else if (value == 'null') env[key] = null
  else if (value == 'undefined') env[key] = undefined
})
export default env

复制代码

image.png

二、配置vite.config.js中的内容

  1. 我在项目中安装的相关包，这几个都包都是我在配置vite的时候下载的
1. mock相关的包
yarn add vite-plugin-mock -D // 自动加载mock,可以查看他的github
yarn add mockjs
2.打包分析
yarn add --dev rollup-plugin-visualizer
3. 
复制代码
  1. 配置mock，mock的话其实我配置的内容不多就几条，更多配置还是得看他的官方github

viteMockServe Github地址 GitHub - vbenjs/vite-plugin-mock: A mock plugin for vite.use mockjs.

import { defineConfig, loadEnv } from 'vite'
import parseEnv from './vite/utilEev'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer';
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig(({ command, mode }) => {
  const isBuild = command === 'build'
  return {
     plugins: [
        vue()，
        visualizer(),
        viteMockServe({
          mockPath: 'mock',
          localEnabled: !isBuild, // 是否是在本地环境启用mock，除了生产环境
          prodEnabled: !isBuild, // 是否是在打包的时候将mock打包进去
        })
     ] 
  }
})
复制代码
  1. 配置路径别名以及css相关内容
...，
import path from 'path'
export default defineConfig(({ command, mode }) => {
    ...,
    return {
     resolve: {
      alias: [
        {
          find: '@', // 根目录
          replacement: path.resolve(__dirname, 'src')
        }
      ]
    },
    css: {
      preprocessorOptions: {
        scss: {
          charset: false, // 清除打包scss文件警告的问题
          additionalData: `@import "@/styles/main.scss";`
        },
        sass: {
          charset: false, // 清除打包sass文件警告的问题
        }
      }
    },
  }
})
复制代码
  1. 配置打包，由于 entryFileNames、chunkFileNames、assetFileNames的配置没有找到，所以需要在rollupjs官网找他的配置方式，具体说明需要查看

需要查看 rollupjs官网 rollupjs.org/guide/en/#o…

  • assetFileNames 静态资源
/* 
*  值可以是函数，也可以是字符串
*  当为函数的时候，接收参数资源信息（assetInfo）
*  默认返回 assets/[name]-[hash][extname]
*/
[extname] 带点的扩展名 例如.css
[ext] 不带点的扩展名 例如css
[hash] 基于资产名称和内容的哈希
[name] 资源文件名，不包含扩展名
复制代码
  • chunkFileNames 快文件名
/* 
*  值可以是函数，也可以是字符串
*  当为函数的时候，接收参数资源信息（chunkInfo）
*  默认返回 [name]-[hash].js
*/
[format] 输出选项中定义的渲染格式，例如es 或 cjs
[hash] 基于块内容及其所有依赖项内容的哈希
[name] 快的名称，这里的解释还是需要看rollupjs官网
复制代码
  • entryFileNames 入口文件名
/* 
*  值可以是函数，也可以是字符串
*  当为函数的时候，接收参数资源信息（chunkInfo）
*  默认返回 [name].js
*/
[format] 输出选项中定义的渲染格式，例如es 或 cjs。
[hash] 基于入口点内容及其所有依赖项内容的哈希。
[name] 入口点的文件名（不带扩展名），除非输入的对象形式用于定义不同的名称。
/*
  补充内容(官方) 
  设置 output.preserveModules 选项时也将使用此模式。但是，这里有一组不同的占位符可用：
*/
`官方位置 https://rollupjs.org/guide/en/#outputpreservemodules`
[format] 输出选项中定义的渲染格式。
[name] 文件的文件名（不带扩展名）。
[ext] 文件的扩展名
[extname] 文件的扩展名，前缀为 .如果它不为空。
[assetExtname] 文件的扩展名，前缀为 .如果它不为空且不是 js、jsx、ts 或 tsx 之一。
复制代码
import { defineConfig, loadEnv } from 'vite'
import parseEnv from './vite/utilEev'
import path from 'path'
export default defineConfig(({ command, mode }) => {
  const isBuild = command === 'build'
  const env = parseEnv(loadEnv(mode, process.cwd()))
  // 打包匹配图片后缀
  const pictureSuffix = /\jpg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp|jpeg$/
  return {
     ...，
     // outDir 由于我需要根据不同环境去打包不同的文件，目前还没找到其他方式去指定这个文别名
     build: {
      outDir: `./${
        mode == 'test' 
        ? 'testBuild' 
        : mode == 'development' 
        ? 'devBuild' 
        : 'dist'
      }/`,
      minify: "terser",
      chunkSizeWarningLimit: 1600, // 块大小警告的限制
      cssCodeSplit: true,
      emptyOutDir: true,
      terserOptions: {
        compress: {
          // 生产环境去除打包以及debugger
          drop_debugger: true,
          drop_console: true
        }
      },
      rollupOptions: {
        emptyOutDir: true,
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return id.toString().split('node_modules/')[1].split('/')[0].toString()
            }
          },
          entryFileNames: `assets/js/[name].js`, // 入口文件
          chunkFileNames: `assets/js/[name]-[hash].js`, // 块文件
          // 由于此处我需要将图片资源与其他资源拆开放到相应的文件内，所以我是用函数的方式
          assetFileNames(chunkInfo) {
            if (chunkInfo.name) {
              // name 文件名 , ext 文件后缀名
              const [name, ext] = path.basename(chunkInfo.name).split('.')
              // 匹配后缀为图片的后缀的都放在images文件下，其他正常放到他的位置
              return `assets/${pictureSuffix.test(ext.toLowerCase()) ? 'images' : ext}/${name.toLowerCase()}-[hash].${ext}`
            }
            return ''
          },
        },
      },
    },
  }
})
复制代码

完整的配置

  1. 在这里涉及到我的环境变量内容
VITE_USER_NODE_ENV = 当前环境时什么( production | test | development )
VITE_BASE_URL= 项目的请求地址，不同环境不同的请求地址
VITE_MOCK_ENABLE = 用于判断当前环境是不是需要开启mock ( true | false )
复制代码
  1. 这里的配置其实还有好多不足，还有不合理的地方，我还在查阅资料去配置，完善我在项目中的各种配置
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import parseEnv from './vite/utilEev'
import { visualizer } from 'rollup-plugin-visualizer';
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig(({ command, mode }) => {
  const isBuild = command === 'build'
  const env = parseEnv(loadEnv(mode, process.cwd()))
  const pictureSuffix = /\jpg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp|jpeg$/
  return {
    plugins: [
      vue(),
      visualizer(),
      viteMockServe({
        mockPath: 'mock',
        localEnabled: !isBuild, // 是否是在本地环境启用mock，除了生产环境
        prodEnabled: !isBuild, // 是否是在打包的时候将mock打包进去
      })
    ],
    base: isBuild ? '/' : '/', // /dist
    resolve: {
      alias: [
        {
          find: '@', // 根目录
          replacement: path.resolve(__dirname, 'src')
        }
      ]
    },
    css: {
      preprocessorOptions: {
        scss: {
          charset: false,
          additionalData: `@import "@/styles/main.scss";`
        },
        sass: {
          charset: false,
        }
      }
    },
    build: {
      outDir: `./${mode == 'test'
          ? 'testBuild'
          : mode == 'development'
            ? 'devBuild'
            : 'dist'
        }/`,
      minify: "terser",
      chunkSizeWarningLimit: 1600, // 块大小警告的限制
      cssCodeSplit: true,
      emptyOutDir: true,
      terserOptions: {
        compress: {
          // 生产环境去除打包以及debugger
          drop_debugger: true,
          drop_console: true
        }
      },
      rollupOptions: {
        emptyOutDir: true,
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return id.toString().split('node_modules/')[1].split('/')[0].toString()
            }
          },
          entryFileNames: `assets/js/[name].js`, // 入口文件
          chunkFileNames: `assets/js/[name]-[hash].js`, // 块文件
          assetFileNames(chunkInfo) {
            if (chunkInfo.name) {
              const [name, ext] = path.basename(chunkInfo.name).split('.')
              return `assets/${pictureSuffix.test(ext.toLowerCase()) ? 'images' : ext}/${name.toLowerCase()}-[hash].${ext}`
            }
            return ''
          },
        },
      },
    },
    server: {
      host: '0.0.0.0',
      port: 5001,
      https: false,
      proxy: {
        '/api': {
          target: env.VITE_MOCK_ENABLE ? '/' : env.VITE_BASE_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    }
  }
})

复制代码

package.json

关于其他的内容，还是需要参考vite , 以官方为主 cn.vitejs.dev/guide/stati…

{
  "name": "fm-code",
  "private": true,
  "version": "0.0.0",
  "scripts": { // 这是我在这里配置的启动命令
    "dev": "vite --open",
    "test": "vite --mode test", // 运行测试环境
    "prod": "vite --mode production", // 运行预览版本 
    "build": "vite build", 
    "build:test": "vite build --mode test", // 打包成测试包
    "build:dev": "vite build --mode development", // 打包成开发环境的包
    "preview": "vite preview --port 8080 --open" // 预览，默认打开浏览器以及预览的端口号
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
   ...
  }
}
复制代码

其他的内容

我还会继续去完善这个配置，以及完善这里这里面不合理的内容，简单的记录一下，省着我每次都需要去查看，找答案还找好久，对于我自己感觉搜索一些内容就怪怪的，所以我要记录一次，完善它。

猜你喜欢

转载自juejin.im/post/7110153987311009823
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022