配置

.env.production

@@ -2,7 +2,7 @@
 VITE_ENV = 'production'
 VITE_OUTPUT_DIR = 'dist'
 # public path
-VITE_PUBLIC_PATH = /
+VITE_PUBLIC_PATH = /dazhuanpan
 
 # Whether to open mock
 VITE_USE_MOCK = true

build/utils.js

@@ -0,0 +1,43 @@
+import fs from 'fs'
+import path from 'path'
+
+// 移除未使用的导入
+/**
+ * 是否是 dev 环境
+ * @export
+ * @param {string} mode
+ * @return {boolean}
+ */
+export function isDevFn(mode) {
+    return mode === 'development';
+}
+
+/**
+ * 是否是 prod 环境
+ * @export
+ * @param {string} mode
+ * @return {boolean}
+ */
+export function isProdFn(mode) {
+    return mode === 'production';
+}
+
+/**
+ * Read all environment variable configuration files to process.env
+ */
+export function wrapperEnv(envConf) {
+    const ret = {};
+
+    for (const envName of Object.keys(envConf)) {
+        let realName = envConf[envName].replace(/\\n/g, '\n');
+        realName = realName === 'true' ? true : realName === 'false' ? false : realName;
+
+        ret[envName] = realName;
+        if (typeof realName === 'string') {
+            process.env[envName] = realName;
+        } else if (typeof realName === 'object') {
+            process.env[envName] = JSON.stringify(realName);
+        }
+    }
+    return ret;
+}

build/vite/build.js

@@ -0,0 +1,44 @@
+export function createBuild(viteEnv) {
+    const { VITE_OUTPUT_DIR } = viteEnv;
+    return {
+        sourcemap: false, // 是否启用
+        outDir: VITE_OUTPUT_DIR,
+        cssCodeSplit: true, // 禁用 CSS 代码拆分,将整个项目中的所有 CSS 将被提取到一个 CSS 文件中
+        brotliSize: false, // 关闭打包计算
+        target: 'esnext',
+        minify: 'terser', // 混淆器, terser 构建后文件体积更小, esbuild
+        // 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项
+        assetsInlineLimit: 4096,
+        chunkSizeWarningLimit: 2000, // chunk 大小警告的限制（以 kbs 为单位）
+        assetsDir: 'static', // 静态资源目录
+        // rollup 打包配置
+        rollupOptions: {
+            output: {
+                chunkFileNames: 'static/js/[name]-[hash].js',
+                entryFileNames: 'static/js/[name]-[hash].js',
+                assetFileNames: (chunkInfo) => {
+                    if (chunkInfo.name) {
+                        const info = chunkInfo.name.split('.');
+                        let extType = info[info.length - 1];
+                        if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(chunkInfo.name)) {
+                            extType = 'media';
+                        } else if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(chunkInfo.name)) {
+                            extType = 'images';
+                        } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(chunkInfo.name)) {
+                            extType = 'fonts';
+                        }
+                        return `static/${extType}/[name]-[hash][extname]`;
+                    }
+                    return 'static/[ext]/[name]-[hash].[ext]';
+                }
+            }
+        },
+        // 压缩配置
+        terserOptions: {
+            compress: {
+                drop_console: false, // 生产环境移除console
+                drop_debugger: true // 生产环境移除debugger
+            }
+        }
+    };
+}

build/vite/plugin/autoImport.js

@@ -0,0 +1,26 @@
+/**
+ *  Introduces component library styles on demand.
+ * https://github.com/antfu/unplugin-auto-import
+ */
+import AutoImport from 'unplugin-auto-import/vite'
+
+export function configAutoImportPlugin() {
+	return AutoImport({
+		include: [
+			/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+			/\.vue$/,
+			/\.vue\?vue/, // .vue
+			/\.md$/ // .md
+		],
+		imports: ['vue', 'vue-router', '@vueuse/core'],
+		// 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'
+		dts: 'src/auto-import.d.ts',
+		// eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
+		// 生成全局声明文件，给eslint用
+		eslintrc: {
+			enabled: true, // Default `false`
+			filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
+			globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
+		}
+	})
+}

build/vite/plugin/autocomponents.js

@@ -0,0 +1,21 @@
+/**
+ *  Introduces component library styles on demand.
+ * https://github.com/antfu/unplugin-vue-components
+ */
+import Components from 'unplugin-vue-components/vite'
+import ViteComponents, { VantResolver } from 'unplugin-vue-components/resolvers'
+
+export function configAutoComponentsPlugin() {
+	return Components({
+		// 指定组件位置，默认是src/components
+		dirs: ['src/components'],
+		extensions: ['vue', 'tsx'],
+		// 配置文件生成位置
+		dts: 'src/components.d.ts',
+		// 搜索子目录
+		deep: true,
+		// 允许子目录作为组件的命名空间前缀。
+		directoryAsNamespace: false
+		// include:[]
+	})
+}

build/vite/plugin/compress.js

@@ -0,0 +1,34 @@
+/**
+ * Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
+ * https://github.com/anncwb/vite-plugin-compression
+ */
+import compressPlugin from 'vite-plugin-compression'
+
+export function configCompressPlugin(
+    compress,
+    deleteOriginFile = false
+) {
+    const compressList = compress.split(',')
+
+    const plugins = []
+
+    if (compressList.includes('gzip')) {
+        plugins.push(
+            compressPlugin({
+                ext: '.gz',
+                deleteOriginFile
+            })
+        )
+    }
+
+    if (compressList.includes('brotli')) {
+        plugins.push(
+            compressPlugin({
+                ext: '.br',
+                algorithm: 'brotliCompress',
+                deleteOriginFile
+            })
+        )
+    }
+    return plugins
+}

build/vite/plugin/index.js

@@ -0,0 +1,37 @@
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+// import { configMockPlugin } from './mock'
+import { configAutoImportPlugin } from './autoImport'
+import { configAutoComponentsPlugin } from './autocomponents'
+import { configCompressPlugin } from './compress'
+
+export function createVitePlugins(viteEnv, isBuild) {
+    const { VITE_USE_MOCK, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv
+
+    const vitePlugins = [
+        // have to
+        vue(),
+        // have to
+        vueJsx({
+            // include: /\.(jsx|tsx)/
+        })
+    ]
+
+    // unplugin-vue-components
+    vitePlugins.push(configAutoComponentsPlugin())
+
+    // unplugin-auto-import
+    vitePlugins.push(configAutoImportPlugin())
+
+    // // vite-plugin-mock
+    // VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild))
+
+    // The following plugins only work in the production environment
+    if (isBuild) {
+        // rollup-plugin-gzip
+        vitePlugins.push(
+            configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE)
+        )
+    }
+    return vitePlugins
+}

build/vite/plugin/mock.js

@@ -0,0 +1,19 @@
+/**
+ * Mock plugin for development and production.
+ * https://github.com/anncwb/vite-plugin-mock
+ */
+// import { viteMockServe } from 'vite-plugin-mock'
+
+// export function configMockPlugin(isBuild: boolean) {
+// 	return viteMockServe({
+// 		ignore: /^_/,
+// 		mockPath: 'mock',
+// 		localEnabled: !isBuild,
+// 		prodEnabled: isBuild,
+// 		injectCode: `
+// 				import { setupProdMockServer } from '../mock/_createProductionServer';
+// 				setupProdMockServer();
+// 				`
+// 	})
+// }
+export {}

build/vite/proxy.js

@@ -0,0 +1,43 @@
+/**
+ * Generate proxy
+ * @param list
+ */
+
+export function createProxy() {
+	return {
+		// 字符串简写写法
+		// '/foo': 'http://localhost:4567',
+		// 选项写法
+		// '/api': {
+		// 	target: process	.env.VITE_APP_API_BASE_URL || 'http://192.168.8.93:3001',
+		// 	changeOrigin: true,
+		// 	rewrite: (path) => path.replace(/^\/api/, '')
+		// },
+		// // 全球指数
+		// '/hcm': {
+		// 	target: process.env.VITE_APP_API_BASE_URL_HCM || 'http://192.168.8.93:3001',
+		// 	changeOrigin: true,
+		// 	rewrite: (path) => path.replace(/^\/hcm/, '')
+		// },
+		// // 时空预测
+		// '/pre': {
+		// 	target: process.env.VITE_APP_API_BASE_URL_AI || 'http://192.168.8.93:3001',
+		// 	changeOrigin: true,
+		// 	rewrite: (path) => path.replace(/^\/pre/, '')
+		// }
+		// 正则表达式写法
+		// '^/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' 的实例
+		//   },
+		// },
+	}
+}

src/views/DZP1.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, onBeforeMount } from 'vue'
+import { ref, onBeforeMount,onMounted } from 'vue'
 import jiantou from '../assets/img/jiantou.png'
 
 const showPopup = ref(false);
@@ -91,6 +91,11 @@ const animateScoreChange = () => {
     }, 3000)
 }
 
+onMounted(() => {
+    console.log(import.meta.env.MODE,'1111')
+    console.log(process.env.NODE_ENV,'2222')
+})
+
 </script>
 
 <template>

vite.config.js

@@ -1,26 +1,29 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import { resolve } from 'path' // 
+import { defineConfig,loadEnv } from "vite";
+import { wrapperEnv } from "./build/utils";
+import vue from "@vitejs/plugin-vue";
+import { resolve } from "path"; //
 
-export default defineConfig({
+export default defineConfig(({ command, mode }) => {
+  const root = process.cwd();
+  const env = loadEnv(mode, root);
+  const viteEnv = wrapperEnv(env);
+  const { VITE_PUBLIC_PATH, VITE_OUTPUT_DIR } = viteEnv;
+  return {
+    base: VITE_PUBLIC_PATH,
     plugins: [vue()], //
     server: {
-    host: '192.168.1.102',
+      host: "192.168.1.102",
       port: 5173,
       //  错误1：server 块内不能嵌套 plugins 配置（已删除）
       proxy: {
-      '/api': {
-        target: 'http://192.168.99.223:3000',
+        "/api": {
+          target: "http://192.168.99.223:3000",
           changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, '')
-      }
-    }
+          rewrite: (path) => path.replace(/^\/api/, ""),
         },
-  resolve: { // 
-    alias: {
-      "/@": resolve(__dirname, "src"), // 
-    }
       },
-  base: process.env.NODE_ENV === "production" ? "/dazhuanpan" : "/",
-  
-})
+    },
+    resolve: {
+    },
+  };
+});