style: add some notes

This commit is contained in:
vben 2020-10-29 23:01:11 +08:00
parent 7658f4d6e8
commit 2f1fbf8e48
14 changed files with 101 additions and 29 deletions

View File

@ -20,9 +20,6 @@ lib
Dockerfile Dockerfile
vue.config.js vue.config.js
commit-lint.js commit-lint.js
/src/assets/iconfont/
/types/shims
/src/types/shims
postcss.config.js postcss.config.js
stylelint.config.js stylelint.config.js
commitlint.config.js commitlint.config.js

View File

@ -1 +1,4 @@
/**
* The name of the configuration file entered in the production environment
*/
export const GLOB_CONFIG_FILE_NAME = '_app.config.js'; export const GLOB_CONFIG_FILE_NAME = '_app.config.js';

View File

@ -1,3 +1,7 @@
/**
* Get the configuration file variable name
* @param env
*/
export const getShortName = (env: any) => { export const getShortName = (env: any) => {
return `__PRODUCTION__${env.VITE_GLOB_APP_SHORT_NAME || '__APP'}__CONF__` return `__PRODUCTION__${env.VITE_GLOB_APP_SHORT_NAME || '__APP'}__CONF__`
.toUpperCase() .toUpperCase()

View File

@ -1,14 +1,12 @@
/**
* Generate additional configuration files when used for packaging. The file can be configured with some global variables, so that it can be changed directly externally without repackaging
*/
import { GLOB_CONFIG_FILE_NAME } from '../constant'; import { GLOB_CONFIG_FILE_NAME } from '../constant';
import fs, { writeFileSync } from 'fs-extra'; import fs, { writeFileSync } from 'fs-extra';
import viteConfig from '../../vite.config'; import viteConfig from '../../vite.config';
import { errorConsole, successConsole, getCwdPath, getEnvConfig } from '../utils'; import { errorConsole, successConsole, getCwdPath, getEnvConfig } from '../utils';
import { getShortName } from '../getShortName';
const getShortName = (env: any) => {
return `__PRODUCTION__${env.VITE_GLOB_APP_SHORT_NAME || '__APP'}__CONF__`
.toUpperCase()
.replace(/\s/g, '');
};
function createConfig( function createConfig(
{ {
@ -20,6 +18,7 @@ function createConfig(
try { try {
const windowConf = `window.${configName}`; const windowConf = `window.${configName}`;
const outDir = viteConfig.outDir || 'dist'; const outDir = viteConfig.outDir || 'dist';
// Ensure that the variable will not be modified
const configStr = `${windowConf}=${JSON.stringify(config)}; const configStr = `${windowConf}=${JSON.stringify(config)};
Object.freeze(${windowConf}); Object.freeze(${windowConf});

View File

@ -7,6 +7,7 @@ import chalk from 'chalk';
export const isFunction = (arg: unknown): arg is (...args: any[]) => any => export const isFunction = (arg: unknown): arg is (...args: any[]) => any =>
typeof arg === 'function'; typeof arg === 'function';
export const isRegExp = (arg: unknown): arg is RegExp => export const isRegExp = (arg: unknown): arg is RegExp =>
Object.prototype.toString.call(arg) === '[object RegExp]'; Object.prototype.toString.call(arg) === '[object RegExp]';
@ -43,6 +44,9 @@ export function readAllFile(root: string, reg: RegExp) {
return resultArr; return resultArr;
} }
/**
* get client ip address
*/
export function getIPAddress() { export function getIPAddress() {
let interfaces = networkInterfaces(); let interfaces = networkInterfaces();
for (let devName in interfaces) { for (let devName in interfaces) {
@ -67,12 +71,23 @@ export function isProdFn(): boolean {
return process.env.NODE_ENV === 'production'; return process.env.NODE_ENV === 'production';
} }
/**
* Whether to generate package preview
*/
export function isReportMode(): boolean { export function isReportMode(): boolean {
return process.env.REPORT === 'true'; return process.env.REPORT === 'true';
} }
/**
* Whether to generate gzip for packaging
*/
export function isBuildGzip(): boolean { export function isBuildGzip(): boolean {
return process.env.VITE_BUILD_GZIP === 'true'; return process.env.VITE_BUILD_GZIP === 'true';
} }
/**
* Whether to generate package site
*/
export function isSiteMode(): boolean { export function isSiteMode(): boolean {
return process.env.SITE === 'true'; return process.env.SITE === 'true';
} }
@ -89,6 +104,7 @@ export interface ViteEnv {
VITE_BUILD_GZIP: boolean; VITE_BUILD_GZIP: boolean;
} }
// Read all environment variable configuration files to process.env
export function loadEnv(): ViteEnv { export function loadEnv(): ViteEnv {
const env = process.env.NODE_ENV; const env = process.env.NODE_ENV;
const ret: any = {}; const ret: any = {};
@ -116,6 +132,11 @@ export function loadEnv(): ViteEnv {
return ret; return ret;
} }
/**
* Get the environment variables starting with the specified prefix
* @param match prefix
* @param confFiles ext
*/
export function getEnvConfig(match = 'VITE_GLOB_', confFiles = ['.env', '.env.production']) { export function getEnvConfig(match = 'VITE_GLOB_', confFiles = ['.env', '.env.production']) {
let envConfig = {}; let envConfig = {};
confFiles.forEach((item) => { confFiles.forEach((item) => {
@ -142,18 +163,34 @@ function consoleFn(color: string, message: any) {
); );
} }
/**
* warnConsole
* @param message
*/
export function successConsole(message: any) { export function successConsole(message: any) {
consoleFn('green', '✨ ' + message); consoleFn('green', '✨ ' + message);
} }
/**
* warnConsole
* @param message
*/
export function errorConsole(message: any) { export function errorConsole(message: any) {
consoleFn('red', '✨ ' + message); consoleFn('red', '✨ ' + message);
} }
/**
* warnConsole
* @param message message
*/
export function warnConsole(message: any) { export function warnConsole(message: any) {
consoleFn('yellow', '✨ ' + message); consoleFn('yellow', '✨ ' + message);
} }
/**
* Get user root directory
* @param dir file path
*/
export function getCwdPath(...dir: string[]) { export function getCwdPath(...dir: string[]) {
return path.resolve(process.cwd(), ...dir); return path.resolve(process.cwd(), ...dir);
} }

View File

@ -1,5 +1,5 @@
// 百度统计代码 用于站点部署 // Baidu statistics code for site deployment
// 只在build:site开启 // Only open in build:site
export const hmScript = `<script> export const hmScript = `<script>
var _hmt = _hmt || []; var _hmt = _hmt || [];
(function() { (function() {

View File

@ -1,6 +1,7 @@
// 修改自https://github.com/kryops/rollup-plugin-gzip // 修改自https://github.com/kryops/rollup-plugin-gzip
// 因为rollup-plugin-gzip不支持vite // 因为rollup-plugin-gzip不支持vite
// vite对css打包独立的。所以不能在打包的时候顺带打包css // vite对css打包独立的。所以不能在打包的时候顺带打包css
// TODO rc.9会支持 configurBuild 配置项。到时候重新修改
import { readFile, writeFile } from 'fs'; import { readFile, writeFile } from 'fs';
import { basename } from 'path'; import { basename } from 'path';

View File

@ -3,6 +3,11 @@ type ProxyItem = [string, string];
type ProxyList = ProxyItem[]; type ProxyList = ProxyItem[];
const reg = /^https:\/\//; const reg = /^https:\/\//;
/**
* Generate proxy
* @param list
*/
export function createProxy(list: ProxyList = []) { export function createProxy(list: ProxyList = []) {
const ret: any = {}; const ret: any = {};
for (const [prefix, target] of list) { for (const [prefix, target] of list) {
@ -12,6 +17,7 @@ export function createProxy(list: ProxyList = []) {
target: target, target: target,
changeOrigin: true, changeOrigin: true,
rewrite: (path: string) => path.replace(new RegExp(`^${prefix}`), ''), rewrite: (path: string) => path.replace(new RegExp(`^${prefix}`), ''),
// https is require secure=false
...(isHttps ? { secure: false } : {}), ...(isHttps ? { secure: false } : {}),
}; };
} }

View File

@ -3,6 +3,9 @@ import userMock from './sys/user';
import menuMock from './sys/menu'; import menuMock from './sys/menu';
import tableDemoMock from './demo/table-demo'; import tableDemoMock from './demo/table-demo';
/**
* Used in a production environment. Need to manually import all modules
*/
export function setupProdMockServer() { export function setupProdMockServer() {
createProdMockServer([...userMock, ...menuMock, ...tableDemoMock]); createProdMockServer([...userMock, ...menuMock, ...tableDemoMock]);
} }

View File

@ -23,14 +23,20 @@
name: 'App', name: 'App',
components: { ConfigProvider }, components: { ConfigProvider },
setup() { setup() {
// Initialize application settings
useInitAppConfigStore(); useInitAppConfigStore();
// Initialize network monitoring
useListenerNetWork(); useListenerNetWork();
// Initialize breakpoint monitoring
createBreakpointListen(); createBreakpointListen();
// Get system configuration
const { projectSetting } = useSetting(); const { projectSetting } = useSetting();
// Get ConfigProvider configuration
const { transformCellText } = useConfigProvider(); const { transformCellText } = useConfigProvider();
let lockOn = {}; let lockOn = {};
if (projectSetting.lockTime) { if (projectSetting.lockTime) {
// Monitor the mouse or keyboard time, used to recalculate the lock screen time
const { on } = useLockPage(); const { on } = useLockPage();
lockOn = on; lockOn = on;
} }

View File

@ -22,8 +22,10 @@ setupRouter(app);
// store // store
setupStore(app); setupStore(app);
// Directives
setupDirectives(app); setupDirectives(app);
// error-handle
setupErrorHandle(app); setupErrorHandle(app);
router.isReady().then(() => { router.isReady().then(() => {
@ -35,8 +37,10 @@ if (isDevMode()) {
window.__APP__ = app; window.__APP__ = app;
} }
// If you do not need to use the mock service in the production environment, you can comment the code
if (isProdMode() && isUseMock()) { if (isProdMode() && isUseMock()) {
setupProdMockServer(); setupProdMockServer();
} }
// Used to share app instances in other modules
setApp(app); setApp(app);

View File

@ -1,3 +1,4 @@
// Application related functions
import type { ProjectConfig } from '/@/types/config'; import type { ProjectConfig } from '/@/types/config';
import type { App } from 'vue'; import type { App } from 'vue';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';

View File

@ -1 +1,2 @@
// 接口返回值data不能为这个否则会判为请求失败
export const errorResult = '__ERROR_RESULT__'; export const errorResult = '__ERROR_RESULT__';

View File

@ -35,79 +35,89 @@ const viteConfig: UserConfig = {
// TODO build error // TODO build error
// entry: './public/index.html', // entry: './public/index.html',
/** /**
* * port
* @default '3000' * @default '3000'
*/ */
port: VITE_PORT, port: VITE_PORT,
/** /**
*
* @default 'localhost' * @default 'localhost'
*/ */
hostname: 'localhost', hostname: 'localhost',
/** /**
* · * Run to open the browser automatically
* @default 'false' * @default 'false'
*/ */
open: false, open: false,
/** /**
* * Set to `false` to disable minification, or specify the minifier to use.
* boolean | 'terser' | 'esbuild' * Available options are 'terser' or 'esbuild'.
* @default 'terser' * @default 'terser'
*/ */
minify: isDevFn() ? 'esbuild' : 'terser', minify: isDevFn() ? 'esbuild' : 'terser',
/** /**
* * Base public path when served in production.
* @default '/' * @default '/'
*/ */
base: VITE_PUBLIC_PATH, base: VITE_PUBLIC_PATH,
/** /**
* * Directory relative from `root` where build output will be placed. If the
* directory exists, it will be removed before the build.
* @default 'dist' * @default 'dist'
*/ */
outDir: 'dist', outDir: 'dist',
/** /**
* @default 'false' * Whether to generate sourcemap
* @default false
*/ */
sourcemap: false, sourcemap: false,
/** /**
* * Directory relative from `outDir` where the built js/css/image assets will
* be placed.
* @default '_assets' * @default '_assets'
*/ */
assetsDir: '_assets', assetsDir: '_assets',
/** /**
* 4096kb * Static asset files smaller than this number (in bytes) will be inlined as
* @default '4096' * base64 strings. Default limit is `4096` (4kb). Set to `0` to disable.
* @default 4096
*/ */
assetsInlineLimit: 4096, assetsInlineLimit: 4096,
/** /**
* esbuild转换目标 * Transpile target for esbuild.
* @default 'es2020' * @default 'es2020'
*/ */
esbuildTarget: 'es2020', esbuildTarget: 'es2020',
/**
* Whether to log asset info to console
* @default false
*/
silent: false, silent: false,
// 别名 /**
* Import alias. The entries can either be exact request -> request mappings
* (exact, no wildcard syntax), or request path -> fs directory mappings.
* When using directory mappings, the key **must start and end with a slash**.
* ```
*/
alias: { alias: {
'/@/': pathResolve('src'), '/@/': pathResolve('src'),
}, },
// terser配置 // terser options
terserOptions: { terserOptions: {
compress: { compress: {
// 是否删除console
drop_console: VITE_DROP_CONSOLE, drop_console: VITE_DROP_CONSOLE,
}, },
}, },
define: { define: {
__VERSION__: pkg.version, __VERSION__: pkg.version,
}, },
// css预处理
cssPreprocessOptions: { cssPreprocessOptions: {
less: { less: {
modifyVars: modifyVars, modifyVars: modifyVars,
javascriptEnabled: true, javascriptEnabled: true,
}, },
}, },
// 会使用 rollup 对 包重新编译,将编译成符合 esm 模块规范的新的包放入 node_modules/.vite_opt_cache // The package will be recompiled using rollup, and the new package compiled into the esm module specification will be put into node_modules/.vite_opt_cache
optimizeDeps: { optimizeDeps: {
include: [ include: [
'echarts', 'echarts',
@ -118,7 +128,7 @@ const viteConfig: UserConfig = {
], ],
}, },
// 本地跨域代理 // Local cross-domain proxy
proxy: createProxy(VITE_PROXY), proxy: createProxy(VITE_PROXY),
plugins: createVitePlugins(viteEnv), plugins: createVitePlugins(viteEnv),
rollupInputOptions: { rollupInputOptions: {