vite2|vite2 + vite.config.js 比较坑的环境变量,vite2模式的使用

想在vite.config.js 里面判断一下环境,看看是不是开发环境,查了一下官网(https://cn.vitejs.dev/guide/env-and-mode.html),说是 可以使用 import.meta.env.DEV 。
但是在 vite.config.js 里面直接写 import.meta.env.DEV 的时候 ,运行时却报错了。
各种查了之后,发现要折腾一下。

import { defineConfig, loadEnv } from 'vite' import vue from '@vitejs/plugin-vue'const project = ({ mode }) => { return defineConfig({ plugins: [vue()], base: loadEnv(mode, process.cwd()).DEV ? './':'nf-rollup-webstorage', }) }export default project

这样折腾之后,虽然不报错了,但是 base 好像不太对劲的样子。测试了一番之后发现,根本没有读取出来。
模式 又继续看,发现了一个叫做“模式”的东东,简单的说,我们可以在项目根目录里面设置 .env.xxx 的文件,来存放不同模式的配置文件。
既然这样的话,干脆就用模式的方式吧。
因为我的项目有三个模式:开发模式,生产模式,库项目。
前两个都是常规模式,只是base不一致,后面的库项目,是因为想作为资源包发包发布到npmjs.com里面去。
修改 vite.config.js 【vite2|vite2 + vite.config.js 比较坑的环境变量,vite2模式的使用】首先建立三个文件:.env、.env.project、.env.lib
分别写入下面的内容,注意要分开写。
VITE_BASEURL=./

VITE_BASEURL=lib

VITE_BASEURL=nf-rollup-webstorage

然后把vite.config.js改成这样:
import { defineConfig, loadEnv } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path' // 主要用于alias文件路径别名 const pathResolve = (dir) => resolve(__dirname, '.', dir)// 发布库的设置 const lib = defineConfig({ plugins: [vue()], // 打包配置 build: { lib: { entry: resolve(__dirname, 'lib/main.js'), name: 'nf-web-storage', fileName: (format) => `nf-web-storage.${format}.js` }, sourcemap: true, rollupOptions: { // 确保外部化处理那些你不想打包进库的依赖 external: ['vue', 'nf-tool'], output: { // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量 globals: { vue: 'Vue', 'nf-tool': 'nfTool' } } } } })// 开发模式、生产模式 const project = (url) => { return defineConfig({ plugins: [vue()], devtools: true, resolve: { alias: { '/@': resolve(__dirname, '.', 'src'), '/nf-web-storage': pathResolve('lib/main.js') // } }, base: url, // 打包配置 build: { sourcemap: true, outDir: 'distp', //指定输出路径 assetsDir: 'static/img/', // 指定生成静态资源的存放路径 rollupOptions: { output: { chunkFileNames: 'static/js1/[name]-[hash].js', entryFileNames: 'static/js2/[name]-[hash].js', assetFileNames: 'static/[ext]/[name]-[hash].[ext]' }, brotliSize: false, // 不统计 target: 'esnext', minify: 'esbuild' // 混淆器,terser构建后文件体积更小 } } }) }// 判断类型,返回对应的 defineConfig export default ({ mode }) => { const url = loadEnv(mode, process.cwd()).VITE_BASEURL switch (url) { case 'lib': // 打包库文件 return lib break; default: // 开发模式、生产模式 return project(url) break; } }

修改 package.json 模式和 vite.config.js 都设置好了,那么如何使用呢?我们需要改一下 package.json 的 script
"scripts": { "dev": "vite", "build": "vite build --mode project", "lib": "vite build --mode lib", "serve": "vite preview" }

然后输入对应命令即可。
yarn dev // 开发模式 yarn build // 发布项目 yarn lib // 发布库

以前各种改 vite.config.js ,现在就不用改文件了。

    推荐阅读