likes
comments
collection

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

作者站长头像
站长
· 阅读数 23

vite.config.js 配置

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

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

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

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

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

我的实现方式

  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()] 
  }
})

再次打印 简单的记录一下在vite.config中的配置,以便以后的查看,还在完善中.....

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

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

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

  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

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

二、配置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": {
   ...
  }
}

其他的内容

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