fix(build): fix environment variable configuration file failure

.env.development

@@ -1,3 +1,5 @@
+VITE_PORT = 3100
+
 # Whether to open mock
 VITE_USE_MOCK = true
 

.env.production

@@ -8,7 +8,7 @@ VITE_PUBLIC_PATH = ./
 VITE_DROP_CONSOLE = true
 
 # Whether to output gz file for packaging
-VITE_BUILD_GZIP = false
+VITE_BUILD_GZIP = true
 
 # Basic interface address SPA
 VITE_GLOB_API_URL=/api

CHANGELOG.zh_CN.md

@@ -5,13 +5,10 @@
 - 新增 `v-ripple`水波纹指令
 - 新增左侧菜单混合模式
 
-### ✨ Refactor
-
-- 移除折叠显示菜单名配置
-
 ### 🐛 Bug Fixes
 
 - 修复混合模式下滚动条丢失问题
+- 修复环境变量配置失效以及 history 模式下 logo 地址问题
 
 ## 2.0.0-rc.14 (2020-12-15)
 

build/script/buildConf.ts

@@ -4,7 +4,6 @@
 import { GLOB_CONFIG_FILE_NAME } from '../constant';
 import fs, { writeFileSync } from 'fs-extra';
 
-import viteConfig from '../../vite.config';
 import { errorConsole, successConsole, getCwdPath, getEnvConfig } from '../utils';
 import { getShortName } from '../getShortName';
 
@@ -17,7 +16,7 @@ function createConfig(
 ) {
   try {
     const windowConf = `window.${configName}`;
-    const outDir = viteConfig.outDir || 'dist';
+    const outDir = 'dist';
     // Ensure that the variable will not be modified
     const configStr = `${windowConf}=${JSON.stringify(config)};
 

build/script/postBuild.ts

@@ -1,32 +1,20 @@
 // #!/usr/bin/env node
 
-import { sh } from 'tasksfile';
-
 import { argv } from 'yargs';
 import { runBuildConfig } from './buildConf';
-// import { runUpdateHtml } from './updateHtml';
 import { errorConsole, successConsole } from '../utils';
 import { startGzipStyle } from '../vite/plugin/gzip/compress';
 
-export const runBuild = async (preview = false) => {
+export const runBuild = async () => {
   try {
     const argvList = argv._;
-    if (preview) {
-      let cmd = `cross-env NODE_ENV=production vite build`;
-      await sh(cmd, {
-        async: true,
-        nopipe: true,
-      });
-    }
 
     // Generate configuration file
     if (!argvList.includes('no-conf')) {
       await runBuildConfig();
     }
     // await runUpdateHtml();
-    if (!preview) {
-      await startGzipStyle();
-    }
+    await startGzipStyle();
     successConsole('Vite Build successfully!');
   } catch (error) {
     errorConsole('Vite Build Error\n' + error);

build/script/preview.ts

@@ -4,20 +4,15 @@ import Koa from 'koa';
 import staticServer from 'koa-static';
 import portfinder from 'portfinder';
 import { resolve } from 'path';
-import viteConfig from '../../vite.config';
 import { getIPAddress } from '../utils';
-// import { runBuild } from './postBuild';
-
-// const BUILD = 1;
-// const NO_BUILD = 2;
 
 // start server
 const startApp = () => {
   const port = 9680;
   portfinder.basePort = port;
   const app = new Koa();
 
-  app.use(staticServer(resolve(process.cwd(), viteConfig.outDir || 'dist')));
+  app.use(staticServer(resolve(process.cwd(), 'dist')));
 
   portfinder.getPort(async (err, port) => {
     if (err) {
@@ -35,25 +30,4 @@ const startApp = () => {
   });
 };
 
-// export const runPreview = async () => {
-//   // const prompt = inquirer.prompt({
-//   //   type: 'list',
-//   //   message: 'Please select a preview method',
-//   //   name: 'type',
-//   //   choices: [
-//   //     {
-//   //       name: 'Preview after packaging',
-//   //       value: BUILD,
-//   //     },
-//   //     {
-//   //       name: `No packaging, preview directly (need to have dist file after packaging)`,
-//   //       value: NO_BUILD,
-//   //     },
-//   //   ],
-//   // });
-//   const { type } = await prompt;
-//   if (type === BUILD) {
-//     await runBuild(true);
-//   }
-// };
 startApp();

build/utils.ts

@@ -63,12 +63,12 @@ export function getIPAddress() {
   return '';
 }
 
-export function isDevFn(): boolean {
-  return process.env.NODE_ENV === 'development';
+export function isDevFn(mode: 'development' | 'production'): boolean {
+  return mode === 'development';
 }
 
-export function isProdFn(): boolean {
-  return process.env.NODE_ENV === 'production';
+export function isProdFn(mode: 'development' | 'production'): boolean {
+  return mode === 'production';
 }
 
 /**
@@ -106,18 +106,11 @@ export interface ViteEnv {
 }
 
 // Read all environment variable configuration files to process.env
-export function loadEnv(): ViteEnv {
-  const env = process.env.NODE_ENV;
+export function wrapperEnv(envConf: any): ViteEnv {
   const ret: any = {};
-  const envList = [`.env.${env}.local`, `.env.${env}`, '.env.local', '.env', ,];
-  envList.forEach((e) => {
-    dotenv.config({
-      path: e,
-    });
-  });
 
-  for (const envName of Object.keys(process.env)) {
-    let realName = (process.env as any)[envName].replace(/\\n/g, '\n');
+  for (const envName of Object.keys(envConf)) {
+    let realName = envConf[envName].replace(/\\n/g, '\n');
     realName = realName === 'true' ? true : realName === 'false' ? false : realName;
     if (envName === 'VITE_PORT') {
       realName = Number(realName);

build/vite/plugin/gzip/compress.ts

@@ -1,7 +1,6 @@
 import { gzip } from 'zlib';
 import { readFileSync, writeFileSync } from 'fs';
 import { GzipPluginOptions } from './types';
-import viteConfig from '../../../../vite.config';
 import { readAllFile, getCwdPath, isBuildGzip, isSiteMode } from '../../../utils';
 
 export function startGzip(
@@ -22,8 +21,8 @@ export function startGzip(
 // 手动压缩css
 export async function startGzipStyle() {
   if (isBuildGzip() || isSiteMode()) {
-    const outDir = viteConfig.outDir || 'dist';
-    const assets = viteConfig.assetsDir || '_assets';
+    const outDir = 'dist';
+    const assets = '_assets';
     const allCssFile = readAllFile(getCwdPath(outDir, assets), /\.(css)$/);
     for (const path of allCssFile) {
       const source = readFileSync(path);

build/vite/plugin/html.ts

@@ -7,16 +7,21 @@ import { hmScript } from '../hm';
 import pkg from '../../../package.json';
 import { GLOB_CONFIG_FILE_NAME } from '../../constant';
 
-export function setupHtmlPlugin(plugins: Plugin[], env: ViteEnv) {
+export function setupHtmlPlugin(
+  plugins: Plugin[],
+  env: ViteEnv,
+  mode: 'development' | 'production'
+) {
   const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env;
 
   const htmlPlugin = ViteHtmlPlugin({
     // html title
     title: VITE_GLOB_APP_TITLE,
-    minify: isProdFn(),
+    minify: isProdFn(mode),
     options: {
+      publicPath: VITE_PUBLIC_PATH,
       // Package and insert additional configuration files
-      injectConfig: isProdFn()
+      injectConfig: isProdFn(mode)
         ? `<script src='${VITE_PUBLIC_PATH || './'}${GLOB_CONFIG_FILE_NAME}?v=${
             pkg.version
           }-${new Date().getTime()}'></script>`

build/vite/plugin/index.ts

@@ -8,21 +8,21 @@ import gzipPlugin from './gzip/index';
 
 // @ts-ignore
 import pkg from '../../../package.json';
-import { isProdFn, isSiteMode, ViteEnv, isReportMode, isBuildGzip } from '../../utils';
+import { isSiteMode, ViteEnv, isReportMode, isBuildGzip } from '../../utils';
 import { setupHtmlPlugin } from './html';
 import { setupPwaPlugin } from './pwa';
 import { setupMockPlugin } from './mock';
 
 // gen vite plugins
-export function createVitePlugins(viteEnv: ViteEnv) {
+export function createVitePlugins(viteEnv: ViteEnv, mode: 'development' | 'production') {
   const vitePlugins: VitePlugin[] = [];
 
   // vite-plugin-html
-  setupHtmlPlugin(vitePlugins, viteEnv);
+  setupHtmlPlugin(vitePlugins, viteEnv, mode);
   // vite-plugin-pwa
-  setupPwaPlugin(vitePlugins, viteEnv);
+  setupPwaPlugin(vitePlugins, viteEnv, mode);
   // vite-plugin-mock
-  setupMockPlugin(vitePlugins, viteEnv);
+  setupMockPlugin(vitePlugins, viteEnv, mode);
 
   // vite-plugin-purge-icons
   vitePlugins.push(PurgeIcons());
@@ -34,12 +34,11 @@ export function createVitePlugins(viteEnv: ViteEnv) {
 export function createRollupPlugin() {
   const rollupPlugins: rollupPlugin[] = [];
 
-  if (!isProdFn() && isReportMode()) {
+  if (isReportMode()) {
     // rollup-plugin-visualizer
     rollupPlugins.push(visualizer({ filename: './build/.cache/stats.html', open: true }) as Plugin);
   }
-
-  if (!isProdFn() && (isBuildGzip() || isSiteMode())) {
+  if (isBuildGzip() || isSiteMode()) {
     // rollup-plugin-gizp
     rollupPlugins.push(gzipPlugin());
   }

build/vite/plugin/mock.ts

@@ -2,14 +2,22 @@ import { createMockServer } from 'vite-plugin-mock';
 import type { Plugin } from 'vite';
 import { isDevFn, ViteEnv } from '../../utils';
 
-export function setupMockPlugin(plugins: Plugin[], env: ViteEnv) {
+export function setupMockPlugin(
+  plugins: Plugin[],
+  env: ViteEnv,
+  mode: 'development' | 'production'
+) {
   const { VITE_USE_MOCK } = env;
-  const mockPlugin = createMockServer({
-    ignore: /^\_/,
-    mockPath: 'mock',
-    showTime: true,
-  });
-  if (isDevFn() && VITE_USE_MOCK) {
+
+  const useMock = isDevFn(mode) && VITE_USE_MOCK;
+
+  if (useMock) {
+    const mockPlugin = createMockServer({
+      ignore: /^\_/,
+      mockPath: 'mock',
+      showTime: true,
+      localEnabled: useMock,
+    });
     plugins.push(mockPlugin);
   }
   return plugins;

build/vite/plugin/pwa.ts

@@ -1,8 +1,13 @@
 import { VitePWA } from 'vite-plugin-pwa';
 import type { Plugin } from 'vite';
-import { isProdFn, ViteEnv } from '../../utils';
+import { ViteEnv } from '../../utils';
 
-export function setupPwaPlugin(plugins: Plugin[], env: ViteEnv) {
+export function setupPwaPlugin(
+  plugins: Plugin[],
+  env: ViteEnv,
+  // @ts-ignore
+  mode: 'development' | 'production'
+) {
   const { VITE_USE_PWA } = env;
 
   const pwaPlugin = VitePWA({
@@ -23,8 +28,7 @@ export function setupPwaPlugin(plugins: Plugin[], env: ViteEnv) {
       ],
     },
   });
-
-  if (isProdFn() && VITE_USE_PWA) {
+  if (VITE_USE_PWA) {
     plugins.push(pwaPlugin);
   }
   return plugins;