chore(projects): 增加html压缩和模板注入

This commit is contained in:
‘chen.home’ 2022-08-05 23:23:20 +08:00
parent a2046cc0dd
commit 927f510e09
8 changed files with 35 additions and 18 deletions

5
.env
View File

@ -1,2 +1,5 @@
# 项目根目录 # 项目根目录
VITE_BASE_URL=/ VITE_BASE_URL=/
# 项目名称
VITE_APP_TITLE = 'Ench Admin'

View File

@ -25,14 +25,14 @@ const serviceEnv = {
/** /**
* @description: vite代理字段 * @description: vite代理字段
* @param {*} viteEnv - * @param {*} env -
*/ */
export function createViteProxy(viteEnv) { export function createViteProxy(env) {
//判断是否需要开启代理 //判断是否需要开启代理
const isOpenProxy = viteEnv.VITE_HTTP_PROXY === 'Y'; const isOpenProxy = env.VITE_HTTP_PROXY === 'Y';
if (!isOpenProxy) return undefined; if (!isOpenProxy) return undefined;
// 返回对应代理 // 返回对应代理
const { VITE_SERVICE_ENV = 'dev' } = viteEnv; const { VITE_SERVICE_ENV = 'dev' } = env;
return serviceEnv[VITE_SERVICE_ENV]; return serviceEnv[VITE_SERVICE_ENV];
} }

View File

@ -1,9 +1,8 @@
import viteCompression from 'vite-plugin-compression'; //https://github.com/vbenjs/vite-plugin-compression/blob/main/README.zh_CN.md import viteCompression from 'vite-plugin-compression'; //https://github.com/vbenjs/vite-plugin-compression/blob/main/README.zh_CN.md
export default (viteEnv) => { export default (env) => {
// 默认使用gzip压缩 // 默认使用gzip压缩
const { VITE_COMPRESS_TYPE = 'gzip' } = viteEnv; const { VITE_COMPRESS_TYPE = 'gzip' } = env;
return viteCompression({ return viteCompression({
algorithm: VITE_COMPRESS_TYPE, // 压缩算法 algorithm: VITE_COMPRESS_TYPE, // 压缩算法
}); });

13
build/plugins/html.ts Normal file
View File

@ -0,0 +1,13 @@
import { createHtmlPlugin } from 'vite-plugin-html'; // https://github.com/vbenjs/vite-plugin-html/blob/main/README.zh_CN.md
export default (env) => {
return createHtmlPlugin({
minify: true, // 压缩HTML
inject: {
// 注入数据
data: {
title: env.VITE_APP_TITLE,
},
},
});
};

View File

@ -1,16 +1,17 @@
import vue from './vue'; import vue from './vue';
import compress from './compress'; import compress from './compress';
import html from './html';
/** /**
* @description: vite插件配置 * @description: vite插件配置
* @param {*} viteEnv - * @param {*} env -
* @return {*} * @return {*}
*/ */
export function setVitePlugins(viteEnv) { export function setVitePlugins(env) {
const plugins = [...vue]; const plugins = [...vue, html(env)];
if (viteEnv.VITE_COMPRESS_OPEN === 'Y') { if (env.VITE_COMPRESS_OPEN === 'Y') {
plugins.push(compress(viteEnv)); plugins.push(compress(env));
} }
return plugins; return plugins;

View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/pixel.svg" /> <link rel="icon" type="image/svg+xml" href="/pixel.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ench-Admin</title> <title><%= title %></title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

View File

@ -51,6 +51,7 @@
"typescript": "^4.6.4", "typescript": "^4.6.4",
"vite": "^3.0.0", "vite": "^3.0.0",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vite-plugin-html": "^3.2.0",
"vue-tsc": "^0.38.4" "vue-tsc": "^0.38.4"
} }
} }

View File

@ -12,11 +12,11 @@ export default defineConfig(({ command, mode }: ConfigEnv) => {
// 根据当前工作目录中的 `mode` 加载 .env 文件 // 根据当前工作目录中的 `mode` 加载 .env 文件
// 设置第三个参数为 '' 来加载所有环境变量,而不管是否有 `VITE_` 前缀。 // 设置第三个参数为 '' 来加载所有环境变量,而不管是否有 `VITE_` 前缀。
const viteEnv = loadEnv(mode, process.cwd(), ''); const env = loadEnv(mode, process.cwd(), '');
return { return {
base: viteEnv.VITE_BASE_URL, base: env.VITE_BASE_URL,
plugins: setVitePlugins(viteEnv), plugins: setVitePlugins(env),
resolve: { resolve: {
alias: { alias: {
'~': rootPath, '~': rootPath,
@ -27,7 +27,7 @@ export default defineConfig(({ command, mode }: ConfigEnv) => {
host: '0.0.0.0', host: '0.0.0.0',
port: 5200, port: 5200,
open: false, open: false,
proxy: createViteProxy(viteEnv), proxy: createViteProxy(env),
}, },
preview: { preview: {
port: 5211, port: 5211,