【集成】环境变量：.env文件和 vite-plugin-html插件

1 year ago · a4209dfec9
5 changed files with 1128 additions and 19 deletions
--- a/.env
+++ b/.env
@ -0,0 +1,3 @@
+APP_TITLE=云端无人机管理系统
+APP_DEVELOPMENT_BASE_URL=/api
+APP_PRODUCTION_BASE_URL=/
--- a/index.html
+++ b/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title><%- title %></title>
  </head>
  <body>
    <div id="app"></div>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -24,7 +24,8 @@
        "husky": "^8.0.0",
        "lint-staged": "^15.1.0",
        "vite": "^4.4.11",
-        "vite-plugin-eslint": "^1.8.1"
+        "vite-plugin-eslint": "^1.8.1",
+        "vite-plugin-html": "^3.2.0"
    },
    "lint-staged": {
        "*.{js,jsx,ts,tsx,vue}": [
--- a/vite.config.js
+++ b/vite.config.js
@ -1,23 +1,106 @@
 import { fileURLToPath, URL } from 'node:url';
-
-import { defineConfig } from 'vite';
+import { createHash } from 'node:crypto';
+import { defineConfig, loadEnv } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx'; // vite支持jsx写法
 import eslintPlugin from 'vite-plugin-eslint'; // vite编译时动态显示eslint校验问题
+import { createHtmlPlugin } from 'vite-plugin-html'; // vite编译html

 // https://vitejs.dev/config/
-export default defineConfig({
-    plugins: [
-        vue(),
-        vueJsx(),
-        eslintPlugin({
-            include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue'],
-        }),
-    ],
-
-    resolve: {
-        alias: {
-            '@': fileURLToPath(new URL('./src', import.meta.url)),
+export default defineConfig(({ mode }) => {
+    // 获取APP开头的 环境变量
+    const { APP_TITLE } = loadEnv(mode, process.cwd(), 'APP');
+
+    return {
+        plugins: [
+            vue(),
+            vueJsx(),
+            eslintPlugin({
+                include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue'],
+            }),
+            createHtmlPlugin({
+                inject: {
+                    data: {
+                        // 将环境变量 APP_TITLE 赋值给 title 方便 html页面使用 title 获取系统标题
+                        title: APP_TITLE,
+                    },
+                },
+            }),
+        ],
+
+        resolve: {
+            alias: {
+                '@': fileURLToPath(new URL('./src', import.meta.url)),
+            },
+        },
+
+        css: {
+            modules: {
+                generateScopedName: (name, filename, css) => {
+                    const [, onlyFileName] = /\/(\w+)\.vue/g.exec(filename);
+                    const cssHash = createHash('sha256').update(css);
+                    const hex = cssHash.digest('hex');
+                    const hash5 = `${hex}`.substring(0, 5);
+                    return `${onlyFileName}_${name}_${hash5}`;
+                },
+            },
+        },
+
+        envPrefix: ['APP_', 'VITE_'],
+
+        // css: {
+        //     preprocessorOptions: {
+        //         less: {
+        //             javascriptEnabled: true,
+        //             // 自动导入 less声明的全局变量
+        //             additionalData: `@import "${fileURLToPath(new URL('./src/styles/variables.less', import.meta.url))}";`,
+        //         },
+        //     },
+        // },
+
+        // esbuild: { loader: { '.js': '.jsx' } },
+
+        server: {
+            // host: true, // 监听所有地址
+            proxy: {
+                // 使用 proxy 实例
+                // '/api': {
+                //     // target: 'http://192.168.10.79:9999',
+                //     // target: 'http://192.168.10.111:9900',
+                //     // target: 'http://192.168.10.32:8102',
+                //     // target: 'http://192.168.10.32:9999',
+                //     changeOrigin: true,
+                //     rewrite: (path) => path.replace(/^\/api/, ''),
+                // },
+                // 案例
+                // // 字符串简写写法：http://localhost:5173/foo -> http://localhost:4567/foo
+                // '/foo': 'http://localhost:4567',
+                // // 带选项写法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
+                // '/api': {
+                //     target: 'http://jsonplaceholder.typicode.com',
+                //     changeOrigin: true,
+                //     rewrite: (path) => path.replace(/^\/api/, ''),
+                // },
+                // // 正则表达式写法：http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/
+                // '^/fallback/.*': {
+                //     target: 'http://jsonplaceholder.typicode.com',
+                //     changeOrigin: true,
+                //     rewrite: (path) => path.replace(/^\/fallback/, ''),
+                // },
+                // // 使用 proxy 实例
+                // '/api': {
+                //     target: 'http://jsonplaceholder.typicode.com',
+                //     changeOrigin: true,
+                //     configure: (proxy, options) => {
+                //         // proxy 是 'http-proxy' 的实例
+                //     }
+                // },
+                // // 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
+                // '/socket.io': {
+                //     target: 'ws://localhost:5174',
+                //     ws: true,
+                // },
+            },
        },
-    },
+    };
 });