1.0.1 • Published 2 years ago
vite-plugin-nx-dotenv v1.0.1
vite-plugin-nx-dotenv
Support Vite's mode mode of dotenv usage in Nx, according to the following priorities [issue] :
- /apps/app/.env.mode.local
- /apps/app/.env.mode
- /apps/app/.env.local
- /apps/app/.env
- /.env.mode.local
- /.env.mode
- /.env.local
- /.env
There is a little limitation in use. If the environment variable passed in through the command line is defined in .env, it will be overwritten by the one in .env. According to normal logic, the command line should have the highest priority.
However, this usage is rare, and it is generally only used during temporary debugging, so it has little impact.
Getting Started
Install Plugin
# npm
npm install vite-plugin-nx-dotenv --save-dev
# yarn
yarn add vite-plugin-nx-dotenv --dev
WorkspaceRoot/vite.base.config.ts
import { join } from 'path';
import { ConfigEnv, UserConfigExport, Plugin } from 'vite';
import { workspaceRoot } from '@nrwl/tao/src/utils/app-root';
import VueSetupExtend from 'vite-plugin-vue-setup-extend';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import { createHtmlPlugin } from 'vite-plugin-html';
import { nxDotEnvSupport } from 'vite-plugin-nx-dotenv';
// https://vitejs.dev/config/
export const viteBaseConfig = async ({ command, mode }: ConfigEnv, nxDotEnv: any) => {
// 配置项
const config: UserConfigExport = {
plugins: [
nxDotEnvSupport({
globalEnvDir: workspaceRoot,
}),
vue(),
vueJsx(),
VueSetupExtend(),
createHtmlPlugin({
inject: {
data: {
CURRENT_ENV: mode,
MOCK_ID: nxDotEnv.VITE_MOCK_ID,
},
},
}),
],
};
config.base = './';
return config;
};
WorkspaceRoot/apps/xxx/vite.config.ts
import { defineConfig } from 'vite';
import { workspaceRoot } from '@nrwl/tao/src/utils/app-root';
import { viteBaseConfig } from '../../vite.base.config';
import { loadNxDotEnv } from 'vite-plugin-nx-dotenv';
import _ from 'lodash';
// https://vitejs.dev/config/
export default defineConfig(async ({ command, mode }) => {
const nxDotEnv = loadNxDotEnv(mode, __dirname, workspaceRoot);
return _.merge(
{
root: __dirname,
build: {
outDir: '../../dist/apps/xxx',
emptyOutDir: true,
},
server: {
port: 4000,
open: `/demo?id=${nxDotEnv.VITE_MOCK_ID}`,
},
},
await viteBaseConfig({ command, mode }, nxDotEnv),
);
});