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代理字段
* @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;
// 返回对应代理
const { VITE_SERVICE_ENV = 'dev' } = viteEnv;
const { VITE_SERVICE_ENV = 'dev' } = 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
export default (viteEnv) => {
export default (env) => {
// 默认使用gzip压缩
const { VITE_COMPRESS_TYPE = 'gzip' } = viteEnv;
const { VITE_COMPRESS_TYPE = 'gzip' } = env;
return viteCompression({
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 compress from './compress';
import html from './html';
/**
* @description: vite插件配置
* @param {*} viteEnv -
* @param {*} env -
* @return {*}
*/
export function setVitePlugins(viteEnv) {
const plugins = [...vue];
export function setVitePlugins(env) {
const plugins = [...vue, html(env)];
if (viteEnv.VITE_COMPRESS_OPEN === 'Y') {
plugins.push(compress(viteEnv));
if (env.VITE_COMPRESS_OPEN === 'Y') {
plugins.push(compress(env));
}
return plugins;

View File

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

View File

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

View File

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