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
|
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
|
||||||
|
@ -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';
|
||||||
|
@ -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()
|
||||||
|
@ -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});
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -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() {
|
||||||
|
@ -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';
|
||||||
|
@ -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 } : {}),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -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]);
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
|
@ -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';
|
||||||
|
@ -1 +1,2 @@
|
|||||||
|
// 接口返回值data不能为这个,否则会判为请求失败
|
||||||
export const errorResult = '__ERROR_RESULT__';
|
export const errorResult = '__ERROR_RESULT__';
|
||||||
|
@ -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: {
|
||||||
|
Loading…
Reference in New Issue
Block a user