feat: 将vite部分参数配置改为从env读取,增加vscode默认插件列表

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+max_line_length = 100
+
+[*.md]
+trim_trailing_whitespace = false

.env

@@ -1 +1,15 @@
 # NODE_ENV=production
+
+# 本地开发请求转发代理前缀
+VITE_API_BASE_URL='/fe'
+# 请求地址
+VITE_API_TARGET_URL = 'http://test.com'
+# 后端请求前缀
+VITE_API_PREFIX='/api'
+
+# 是否构建时删除console和debugger
+VITE_BUILD_DROP_CONSOLE='on'
+# 是否兼容IE11以上的
+VITE_BUILD_LEAGCY='on'
+# 是否开启gzip压缩
+VITE_BUILD_GZIP='on'

.env.development

@@ -1,2 +1,8 @@
 NODE_ENV=development
-VITE_TEST=123123
+
+# 本地开发请求转发代理前缀
+VITE_API_BASE_URL='/fe'
+# 请求地址
+VITE_API_TARGET_URL = 'http://test.com'
+# 后端请求前缀
+VITE_API_PREFIX='/api'

.env.legacy

@@ -1 +0,0 @@
-NODE_ENV=production

.env.production

@@ -1 +1,7 @@
 NODE_ENV=production
+# 是否构建时删除console和debugger
+VITE_BUILD_DROP_CONSOLE='on'
+# 是否兼容IE11以上的
+VITE_BUILD_LEAGCY='on'
+# 是否开启gzip压缩
+VITE_BUILD_GZIP='on'

.env.test

@@ -1 +1,7 @@
 NODE_ENV=production
+# 是否构建时删除console和debugger
+VITE_BUILD_DROP_CONSOLE='on'
+# 是否兼容IE11以上的
+VITE_BUILD_LEAGCY='on'
+# 是否开启gzip压缩
+VITE_BUILD_GZIP='on'

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["johnsoncodehk.volar"]
+  "recommendations": ["johnsoncodehk.volar", "editorconfig.editorconfig", "mikestead.dotenv", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
 }

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 0.9.2(2022-02-17)
+
+### Features
+
+- 增加 env 变量，修改为 vite 部分参数配置从 env 文件读取
+- 增加 vscode 默认插件列表
+
 ## 0.9.1(2022-02-16)
 
 ### Features

package.json

@@ -1,11 +1,10 @@
 {
   "name": "vite-template",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "build:test": "vue-tsc --noEmit && vite build --mode test",
-    "build:legacy": "vue-tsc --noEmit && vite build --mode legacy",
     "preview": "vite preview",
     "lint": "eslint --cache \"src/**/*.{vue,ts,tsx}\" --fix",
     "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",

src/components.d.ts

@@ -4,8 +4,21 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
+    AAvatar: typeof import('ant-design-vue/es')['Avatar'];
+    AButton: typeof import('ant-design-vue/es')['Button'];
+    ADropdown: typeof import('ant-design-vue/es')['Dropdown'];
+    ALayout: typeof import('ant-design-vue/es')['Layout'];
+    ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent'];
+    ALayoutFooter: typeof import('ant-design-vue/es')['LayoutFooter'];
+    ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader'];
+    ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider'];
+    AMenu: typeof import('ant-design-vue/es')['Menu'];
+    AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider'];
+    AMenuItem: typeof import('ant-design-vue/es')['MenuItem'];
+    ASpin: typeof import('ant-design-vue/es')['Spin'];
     HelloWorld: typeof import('./components/HelloWorld.vue')['default'];
     InitLoading: typeof import('./components/InitLoading/index.vue')['default'];
+    UserOutlined: typeof import('@ant-design/icons-vue')['UserOutlined'];
   }
 }
 

src/env.d.ts

@@ -9,6 +9,9 @@ declare module '*.vue' {
 
 interface ImportMetaEnv {
   readonly VITE_TEST: string;
+  readonly VITE_API_BASE_URL: string;
+  readonly VITE_API_PREFIX: string;
+  readonly VITE_API_TARGET_URL: string;
   // 更多环境变量...
 }
 

src/service/index.ts

@@ -1,5 +1,6 @@
 import { http } from '@/utils/request';
-import { API_PREFIX } from '../../vite/config';
+
+const { VITE_API_PREFIX } = import.meta.env;
 interface InterfaceUrl {
   [key: string]: string;
 }
@@ -7,7 +8,7 @@ const url: InterfaceUrl = {
   getUserInfo: '/getUserInfo'
 };
 Object.keys(url).map(key => {
-  url[key] = `${API_PREFIX}${url[key]}`;
+  url[key] = `${VITE_API_PREFIX}${url[key]}`;
 });
 console.log('api >>>', url);
 

src/utils/request/index.ts

@@ -1,9 +1,9 @@
 import { AppAxios } from './Axios';
-import { API_BASE_URL } from '../../../vite/config';
 
+const { VITE_API_BASE_URL } = import.meta.env;
 const isBuild = process.env.NODE_ENV === 'production';
 
 export const http = new AppAxios({
-  baseURL: isBuild ? '' : API_BASE_URL,
+  baseURL: isBuild ? '' : VITE_API_BASE_URL,
   timeout: 60e3
 });

vite.config.ts

@@ -1,14 +1,16 @@
-import { UserConfig, ConfigEnv } from 'vite';
+import { UserConfig, ConfigEnv, loadEnv } from 'vite';
 import { resolve } from 'path';
 import { createVitePlugins } from './vite/plugin';
 import { generateModifyVars } from './vite/themeConfig';
-import { proxy } from './vite/proxy';
+import { createProxy } from './vite/proxy';
 const root = process.cwd();
 // https://vitejs.dev/config/
 
 export default ({ command, mode }: ConfigEnv): UserConfig => {
-  console.log('vite >>>', command, mode);
+  const env = loadEnv(mode, root);
+  console.log('vite >>>', command, mode, env);
   const isBuild = command === 'build';
+  const isDropConsole = env.VITE_BUILD_DROP_CONSOLE === 'on';
   return {
     root,
     resolve: {
@@ -35,9 +37,9 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
           // TODO:
           keep_infinity: true,
           // 自动删除console
-          drop_console: true,
+          drop_console: isDropConsole,
           // 自动删除debugger
-          drop_debugger: true
+          drop_debugger: isDropConsole
         }
       },
       // bortli压缩大小报告，压缩大型输出文件可能会慢，禁用提高大型项目的构建性能
@@ -45,14 +47,14 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       // 块大小警告的限制（单位 kbs），默认500
       chunkSizeWarningLimit: 2000
     },
-    plugins: createVitePlugins(isBuild, mode),
+    plugins: createVitePlugins(isBuild, env),
     server: {
       hmr: {
         // 禁用服务器错误的遮罩层
         overlay: false
       },
       open: true,
-      proxy
+      proxy: createProxy(env)
     }
   };
 };

vite/config.ts

@@ -1,8 +1,2 @@
 // 应用名
 export const APP_TITLE = 'Vite-Vue3-Admin';
-// 后端请求前缀
-export const API_PREFIX = '/api';
-// 本地开发请求转发代理前缀
-export const API_BASE_URL = '/fe';
-// 请求地址
-export const API_TARGET_URL = 'http://test.com';

vite/plugin.ts

@@ -7,7 +7,7 @@ import AutoImport from 'unplugin-auto-import/vite';
 import legacy from '@vitejs/plugin-legacy';
 import compression from 'vite-plugin-compression';
 
-export function createVitePlugins(isBuild: boolean, mode: string): Plugin[] {
+export function createVitePlugins(isBuild: boolean, env): Plugin[] {
   const plugins = [
     vue(),
     vueJsx(),
@@ -40,7 +40,7 @@ export function createVitePlugins(isBuild: boolean, mode: string): Plugin[] {
     })
   ];
   if (isBuild) {
-    if (mode === 'legacy') {
+    if (env.VITE_BUILD_LEAGCY === 'on') {
       plugins.push(
         legacy({
           targets: ['ie >= 11'],
@@ -48,18 +48,20 @@ export function createVitePlugins(isBuild: boolean, mode: string): Plugin[] {
         })
       );
     }
-    plugins.push(
-      compression({
-        // 生成压缩包后缀
-        ext: '.gz',
-        // 是否在控制台输出压缩结果
-        verbose: true,
-        // 压缩后是否删除源文件
-        deleteOriginFile: false,
-        // 超过的进行压缩，单位为b
-        threshold: 5 * 1024 + 1 // 5KB
-      })
-    );
+    if (env.VITE_BUILD_GZIP === 'on') {
+      plugins.push(
+        compression({
+          // 生成压缩包后缀
+          ext: '.gz',
+          // 是否在控制台输出压缩结果
+          verbose: true,
+          // 压缩后是否删除源文件
+          deleteOriginFile: false,
+          // 超过的进行压缩，单位为b
+          threshold: 5 * 1024 + 1 // 5KB
+        })
+      );
+    }
   }
   return plugins;
 }

vite/proxy.ts

@@ -1,9 +1,13 @@
-import { API_BASE_URL, API_TARGET_URL } from './config';
 import type { ProxyOptions } from 'vite';
-export const proxy: Record<string, ProxyOptions> = {
-  [API_BASE_URL]: {
-    target: API_TARGET_URL,
-    changeOrigin: true,
-    rewrite: path => path.replace(new RegExp(`^${API_BASE_URL}`), '')
-  }
+
+export const createProxy = (env): Record<string, ProxyOptions> => {
+  const { VITE_API_BASE_URL, VITE_API_TARGET_URL } = env;
+  const proxy = {
+    [VITE_API_BASE_URL]: {
+      target: VITE_API_TARGET_URL,
+      changeOrigin: true,
+      rewrite: path => path.replace(new RegExp(`^${VITE_API_BASE_URL}`), '')
+    }
+  };
+  return proxy;
 };