想在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
首先建立三个文件：.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 ，现在就不用改文件了。
