mirror of
https://github.com/vbenjs/vben-admin-thin-next.git
synced 2025-01-23 09:40:22 +08:00
style: add some notes
This commit is contained in:
parent
7658f4d6e8
commit
2f1fbf8e48
@ -20,9 +20,6 @@ lib
|
||||
Dockerfile
|
||||
vue.config.js
|
||||
commit-lint.js
|
||||
/src/assets/iconfont/
|
||||
/types/shims
|
||||
/src/types/shims
|
||||
postcss.config.js
|
||||
stylelint.config.js
|
||||
commitlint.config.js
|
||||
|
@ -1 +1,4 @@
|
||||
/**
|
||||
* The name of the configuration file entered in the production environment
|
||||
*/
|
||||
export const GLOB_CONFIG_FILE_NAME = '_app.config.js';
|
||||
|
@ -1,3 +1,7 @@
|
||||
/**
|
||||
* Get the configuration file variable name
|
||||
* @param env
|
||||
*/
|
||||
export const getShortName = (env: any) => {
|
||||
return `__PRODUCTION__${env.VITE_GLOB_APP_SHORT_NAME || '__APP'}__CONF__`
|
||||
.toUpperCase()
|
||||
|
@ -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 fs, { writeFileSync } from 'fs-extra';
|
||||
|
||||
import viteConfig from '../../vite.config';
|
||||
import { errorConsole, successConsole, getCwdPath, getEnvConfig } from '../utils';
|
||||
|
||||
const getShortName = (env: any) => {
|
||||
return `__PRODUCTION__${env.VITE_GLOB_APP_SHORT_NAME || '__APP'}__CONF__`
|
||||
.toUpperCase()
|
||||
.replace(/\s/g, '');
|
||||
};
|
||||
import { getShortName } from '../getShortName';
|
||||
|
||||
function createConfig(
|
||||
{
|
||||
@ -20,6 +18,7 @@ function createConfig(
|
||||
try {
|
||||
const windowConf = `window.${configName}`;
|
||||
const outDir = viteConfig.outDir || 'dist';
|
||||
// Ensure that the variable will not be modified
|
||||
const configStr = `${windowConf}=${JSON.stringify(config)};
|
||||
|
||||
Object.freeze(${windowConf});
|
||||
|
@ -7,6 +7,7 @@ import chalk from 'chalk';
|
||||
|
||||
export const isFunction = (arg: unknown): arg is (...args: any[]) => any =>
|
||||
typeof arg === 'function';
|
||||
|
||||
export const isRegExp = (arg: unknown): arg is RegExp =>
|
||||
Object.prototype.toString.call(arg) === '[object RegExp]';
|
||||
|
||||
@ -43,6 +44,9 @@ export function readAllFile(root: string, reg: RegExp) {
|
||||
return resultArr;
|
||||
}
|
||||
|
||||
/**
|
||||
* get client ip address
|
||||
*/
|
||||
export function getIPAddress() {
|
||||
let interfaces = networkInterfaces();
|
||||
for (let devName in interfaces) {
|
||||
@ -67,12 +71,23 @@ export function isProdFn(): boolean {
|
||||
return process.env.NODE_ENV === 'production';
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether to generate package preview
|
||||
*/
|
||||
export function isReportMode(): boolean {
|
||||
return process.env.REPORT === 'true';
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether to generate gzip for packaging
|
||||
*/
|
||||
export function isBuildGzip(): boolean {
|
||||
return process.env.VITE_BUILD_GZIP === 'true';
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether to generate package site
|
||||
*/
|
||||
export function isSiteMode(): boolean {
|
||||
return process.env.SITE === 'true';
|
||||
}
|
||||
@ -89,6 +104,7 @@ export interface ViteEnv {
|
||||
VITE_BUILD_GZIP: boolean;
|
||||
}
|
||||
|
||||
// Read all environment variable configuration files to process.env
|
||||
export function loadEnv(): ViteEnv {
|
||||
const env = process.env.NODE_ENV;
|
||||
const ret: any = {};
|
||||
@ -116,6 +132,11 @@ export function loadEnv(): ViteEnv {
|
||||
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']) {
|
||||
let envConfig = {};
|
||||
confFiles.forEach((item) => {
|
||||
@ -142,18 +163,34 @@ function consoleFn(color: string, message: any) {
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* warnConsole
|
||||
* @param message
|
||||
*/
|
||||
export function successConsole(message: any) {
|
||||
consoleFn('green', '✨ ' + message);
|
||||
}
|
||||
|
||||
/**
|
||||
* warnConsole
|
||||
* @param message
|
||||
*/
|
||||
export function errorConsole(message: any) {
|
||||
consoleFn('red', '✨ ' + message);
|
||||
}
|
||||
|
||||
/**
|
||||
* warnConsole
|
||||
* @param message message
|
||||
*/
|
||||
export function warnConsole(message: any) {
|
||||
consoleFn('yellow', '✨ ' + message);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get user root directory
|
||||
* @param dir file path
|
||||
*/
|
||||
export function getCwdPath(...dir: string[]) {
|
||||
return path.resolve(process.cwd(), ...dir);
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
// 百度统计代码 用于站点部署
|
||||
// 只在build:site开启
|
||||
// Baidu statistics code for site deployment
|
||||
// Only open in build:site
|
||||
export const hmScript = `<script>
|
||||
var _hmt = _hmt || [];
|
||||
(function() {
|
||||
|
@ -1,6 +1,7 @@
|
||||
// 修改自https://github.com/kryops/rollup-plugin-gzip
|
||||
// 因为rollup-plugin-gzip不支持vite
|
||||
// vite对css打包独立的。所以不能在打包的时候顺带打包css
|
||||
// TODO rc.9会支持 configurBuild 配置项。到时候重新修改
|
||||
|
||||
import { readFile, writeFile } from 'fs';
|
||||
import { basename } from 'path';
|
||||
|
@ -3,6 +3,11 @@ type ProxyItem = [string, string];
|
||||
type ProxyList = ProxyItem[];
|
||||
|
||||
const reg = /^https:\/\//;
|
||||
|
||||
/**
|
||||
* Generate proxy
|
||||
* @param list
|
||||
*/
|
||||
export function createProxy(list: ProxyList = []) {
|
||||
const ret: any = {};
|
||||
for (const [prefix, target] of list) {
|
||||
@ -12,6 +17,7 @@ export function createProxy(list: ProxyList = []) {
|
||||
target: target,
|
||||
changeOrigin: true,
|
||||
rewrite: (path: string) => path.replace(new RegExp(`^${prefix}`), ''),
|
||||
// https is require secure=false
|
||||
...(isHttps ? { secure: false } : {}),
|
||||
};
|
||||
}
|
||||
|
@ -3,6 +3,9 @@ import userMock from './sys/user';
|
||||
import menuMock from './sys/menu';
|
||||
import tableDemoMock from './demo/table-demo';
|
||||
|
||||
/**
|
||||
* Used in a production environment. Need to manually import all modules
|
||||
*/
|
||||
export function setupProdMockServer() {
|
||||
createProdMockServer([...userMock, ...menuMock, ...tableDemoMock]);
|
||||
}
|
||||
|
@ -23,14 +23,20 @@
|
||||
name: 'App',
|
||||
components: { ConfigProvider },
|
||||
setup() {
|
||||
// Initialize application settings
|
||||
useInitAppConfigStore();
|
||||
// Initialize network monitoring
|
||||
useListenerNetWork();
|
||||
// Initialize breakpoint monitoring
|
||||
createBreakpointListen();
|
||||
// Get system configuration
|
||||
const { projectSetting } = useSetting();
|
||||
// Get ConfigProvider configuration
|
||||
const { transformCellText } = useConfigProvider();
|
||||
|
||||
let lockOn = {};
|
||||
if (projectSetting.lockTime) {
|
||||
// Monitor the mouse or keyboard time, used to recalculate the lock screen time
|
||||
const { on } = useLockPage();
|
||||
lockOn = on;
|
||||
}
|
||||
|
@ -22,8 +22,10 @@ setupRouter(app);
|
||||
// store
|
||||
setupStore(app);
|
||||
|
||||
// Directives
|
||||
setupDirectives(app);
|
||||
|
||||
// error-handle
|
||||
setupErrorHandle(app);
|
||||
|
||||
router.isReady().then(() => {
|
||||
@ -35,8 +37,10 @@ if (isDevMode()) {
|
||||
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()) {
|
||||
setupProdMockServer();
|
||||
}
|
||||
|
||||
// Used to share app instances in other modules
|
||||
setApp(app);
|
||||
|
@ -1,3 +1,4 @@
|
||||
// Application related functions
|
||||
import type { ProjectConfig } from '/@/types/config';
|
||||
import type { App } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
|
@ -1 +1,2 @@
|
||||
// 接口返回值data不能为这个,否则会判为请求失败
|
||||
export const errorResult = '__ERROR_RESULT__';
|
||||
|
@ -35,79 +35,89 @@ const viteConfig: UserConfig = {
|
||||
// TODO build error
|
||||
// entry: './public/index.html',
|
||||
/**
|
||||
* 端口号
|
||||
* port
|
||||
* @default '3000'
|
||||
*/
|
||||
port: VITE_PORT,
|
||||
/**
|
||||
* 服务地址
|
||||
* @default 'localhost'
|
||||
*/
|
||||
hostname: 'localhost',
|
||||
/**
|
||||
* 运行自动打开浏览器·
|
||||
* Run to open the browser automatically
|
||||
* @default 'false'
|
||||
*/
|
||||
open: false,
|
||||
/**
|
||||
* 压缩代码
|
||||
* boolean | 'terser' | 'esbuild'
|
||||
* Set to `false` to disable minification, or specify the minifier to use.
|
||||
* Available options are 'terser' or 'esbuild'.
|
||||
* @default 'terser'
|
||||
*/
|
||||
minify: isDevFn() ? 'esbuild' : 'terser',
|
||||
/**
|
||||
* 基本公共路径
|
||||
* Base public path when served in production.
|
||||
* @default '/'
|
||||
*/
|
||||
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'
|
||||
*/
|
||||
outDir: 'dist',
|
||||
/**
|
||||
* @default 'false'
|
||||
* Whether to generate sourcemap
|
||||
* @default false
|
||||
*/
|
||||
sourcemap: false,
|
||||
/**
|
||||
* 资源输出路径
|
||||
* Directory relative from `outDir` where the built js/css/image assets will
|
||||
* be placed.
|
||||
* @default '_assets'
|
||||
*/
|
||||
assetsDir: '_assets',
|
||||
/**
|
||||
* 静态资源小于该大小将会内联,默认4096kb
|
||||
* @default '4096'
|
||||
* Static asset files smaller than this number (in bytes) will be inlined as
|
||||
* base64 strings. Default limit is `4096` (4kb). Set to `0` to disable.
|
||||
* @default 4096
|
||||
*/
|
||||
assetsInlineLimit: 4096,
|
||||
/**
|
||||
* esbuild转换目标。
|
||||
* Transpile target for esbuild.
|
||||
* @default 'es2020'
|
||||
*/
|
||||
esbuildTarget: 'es2020',
|
||||
/**
|
||||
* Whether to log asset info to console
|
||||
* @default 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: {
|
||||
'/@/': pathResolve('src'),
|
||||
},
|
||||
// terser配置
|
||||
// terser options
|
||||
terserOptions: {
|
||||
compress: {
|
||||
// 是否删除console
|
||||
drop_console: VITE_DROP_CONSOLE,
|
||||
},
|
||||
},
|
||||
define: {
|
||||
__VERSION__: pkg.version,
|
||||
},
|
||||
// css预处理
|
||||
cssPreprocessOptions: {
|
||||
less: {
|
||||
modifyVars: modifyVars,
|
||||
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: {
|
||||
include: [
|
||||
'echarts',
|
||||
@ -118,7 +128,7 @@ const viteConfig: UserConfig = {
|
||||
],
|
||||
},
|
||||
|
||||
// 本地跨域代理
|
||||
// Local cross-domain proxy
|
||||
proxy: createProxy(VITE_PROXY),
|
||||
plugins: createVitePlugins(viteEnv),
|
||||
rollupInputOptions: {
|
||||
|
Loading…
Reference in New Issue
Block a user