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 的文件,来存放不同模式的配置文件。

既然这样的话,干脆就用模式的方式吧。

因为我的项目有三个模式:开发模式,生产模式,库项目。文章来源地址:https://www.yii666.com/article/756200.html

前两个都是常规模式,只是base不一致,后面的库项目,是因为想作为资源包发包发布到npmjs.com里面去。

修改 vite.config.js

首先建立三个文件:.env、.env.project、.env.lib

分别写入下面的内容,注意要分开写。网址:yii666.com

VITE_BASEURL=./
VITE_BASEURL=lib
VITE_BASEURL=nf-rollup-webstorage

然后把vite.config.js改成这样:文章来源地址https://www.yii666.com/article/756200.html文章地址https://www.yii666.com/article/756200.html

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网址:yii666.com<

 "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 ,现在就不用改文件了。

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

vite2 + vite.config.js 比较坑的环境变量,vite2模式的使用-相关文章

  1. vite首次启动加载慢

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

  3. VS2010/2013 运行是很卡的加速方案

    前段时间为了一个项目而把VS2008换成了VS2010,结果原本就不堪重负的本本跑起VS2010来那更是慢得没话说,于是看了遍VS2010选项,又从网上到处找资料找优化方法,总算使我的VS2010跑得快了些。一、VS2010选项视觉体验设置工具-选项-环境视觉体验的勾选都去掉。不解释,你懂得。

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png