chore: 多环境配置 & vite 环境变量声明 & vite 配置

.env.development

@@ -0,0 +1,5 @@
+# 请勿改动这一项，该项也不可以通过 import.meta.env.NODE_ENV 调用
+NODE_ENV = development
+
+# 自定义的环境变量可以修改（命名必须以 VITE_ 开头）
+VITE_BASE_API = '/mock-api/v1'

.env.production

@@ -0,0 +1,5 @@
+# 请勿改动这一项，该项也不可以通过 import.meta.env.NODE_ENV 调用
+NODE_ENV = production
+
+# 自定义的环境变量可以修改（命名必须以 VITE_ 开头）
+VITE_BASE_API = '/mock-api/v1'

.env.staging

@@ -0,0 +1,5 @@
+# 请勿改动这一项，该项也不可以通过 import.meta.env.NODE_ENV 调用
+NODE_ENV = production
+
+# 自定义的环境变量可以修改（命名必须以 VITE_ 开头）
+VITE_BASE_API = '/mock-api/v1'

package.json

@@ -4,8 +4,10 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "build:stage": "vue-tsc --noEmit && vite build --mode staging",
-    "preview": "vite preview"
+    "build:prod": "vue-tsc --noEmit && vite build",
+    "preview:stage": "pnpm build:stage && vite preview",
+    "preview:prod": "pnpm build:prod && vite preview"
   },
   "dependencies": {
     "vue": "^3.2.33"

src/App.vue

@@ -1,7 +1,15 @@
 <script setup lang="ts">
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import HelloWorld from './components/HelloWorld.vue'
+import HelloWorld from "./components/HelloWorld.vue"
+console.log('测试 console.log')
+console.info('测试 console.info')
+console.error('测试 console.error')
+console.info('测试 VITE_BASE_API', import.meta.env.VITE_BASE_API)
+console.info('测试 MODE', import.meta.env.MODE)
+console.info('测试 BASE_URL', import.meta.env.BASE_URL)
+console.info('测试 DEV', import.meta.env.DEV)
+console.info('测试 PROD', import.meta.env.PROD)
 </script>
 
 <template>

src/env.d.ts

@@ -1,8 +1,14 @@
 /// <reference types="vite/client" />
 
-declare module '*.vue' {
+/** 声明自动引入的 vue 组件 */
-  import type { DefineComponent } from 'vue'
+declare module "*.vue" {
+  import type { DefineComponent } from "vue"
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+/** 声明 vite 环境变量的类型（如果未声明则默认是 any） */
+declare interface ImportMetaEnv {
+  readonly VITE_BASE_API: string
+}

vite.config.ts

@@ -11,6 +11,58 @@ export default (env: ConfigEnv): UserConfigExport => {
         "@": resolve(__dirname, "./src"),
       },
     },
+    server: {
+      /** 是否开启 https */
+      https: false,
+      /** host 设置为 true 才可以使用 network 的形式，以 ip 访问项目 */
+      host: true, // host: "0.0.0.0"
+      /** 端口号 */
+      port: 9999,
+      /** 是否自动打开浏览器 */
+      open: false,
+      /** 跨域设置允许 */
+      cors: true,
+      /** 如果端口已占用，直接退出 */
+      strictPort: true,
+      /** 接口代理 */
+      proxy: {
+        "/mock-api": {
+          target: "https://vue-typescript-admin-mock-server-armour.vercel.app/mock-api",
+          ws: true,
+          /** 是否允许跨域 */
+          changeOrigin: true,
+          rewrite: (path) => path.replace("/mock-api", ""),
+        },
+      },
+    },
+    build: {
+      brotliSize: false,
+      /** 消除打包大小超过 500kb 警告 */
+      chunkSizeWarningLimit: 2000,
+      /** vite 2.6.x 以上需要配置 minify: terser，terserOptions 才能生效 */
+      minify: "terser",
+      /** 在 build 代码时移除 console.log、debugger 和 注释 */
+      terserOptions: {
+        compress: {
+          drop_console: false,
+          drop_debugger: true,
+          pure_funcs: ["console.log"],
+        },
+        output: {
+          /** 删除注释 */
+          comments: false,
+        },
+      },
+      assetsDir: "static/assets",
+      /** 静态资源打包到 dist 下的不同目录 */
+      rollupOptions: {
+        output: {
+          chunkFileNames: "static/js/[name]-[hash].js",
+          entryFileNames: "static/js/[name]-[hash].js",
+          assetFileNames: "static/[ext]/[name]-[hash].[ext]",
+        },
+      },
+    },
     plugins: [vue()],
   }
 }