build: 将开发服务器端口设置为随机可用端口

避免端口冲突，提升开发体验。原先的 VITE_PORT 环境变量配置被注释，改为使用端口 0 让系统自动分配。

build: 将开发服务器端口设置为随机可用端口
避免端口冲突，提升开发体验。原先的 VITE_PORT 环境变量配置被注释，改为使用端口 0 让系统自动分配。
hookehuyr
Commit 4b90ad1bb0c00ae72f9175035faec31fe0bb36ed 4b90ad1b 1 parent 17bcca59
Showing 1 changed file with 36 additions and 28 deletions
vite.config.js
--- a/vite.config.js
View file @4b90ad1
+++ b/vite.config.js
View file @4b90ad1
@@ -8,16 +8,16 @@
 import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
-import path from "path"
+import path from 'path'
 import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import { VantResolver } from 'unplugin-vue-components/resolvers'
 import { createProxy } from './build/proxy'
 export default ({ mode }) => {
-  const root = process.cwd();
+  const root = process.cwd()
-  const viteEnv = loadEnv(mode, root);
+  const viteEnv = loadEnv(mode, root)
   // let isProd = (command === 'serve'); // 情景配置是否为开发模式 serve 或 build
   return defineConfig({
@@ -36,8 +36,8 @@ export default ({ mode }) => {
         dts: 'src/auto-imports.d.ts',
         // 解决eslint报错问题
         eslintrc: {
-          enabled: true
+          enabled: true,
-        }
+        },
       }),
       Components({
         resolvers: [VantResolver()],
@@ -47,18 +47,19 @@ export default ({ mode }) => {
     publicDir: 'public', // 作为静态资源服务的文件夹。这个目录中的文件会在开发中被服务于 /，在开发模式时，会被拷贝到 outDir 的根目录，并没有转换，永远只是复制到这里。该值可以是文件系统的绝对路径，也可以是相对于项目的根目录路径。
     // cacheDir: '', // 存储缓存文件的目录。此目录下会存储预打包的依赖项或 vite 生成的某些缓存文件，使用缓存可以提高性能。如需重新生成缓存文件，你可以使用 --force 命令行选项或手动删除目录。此选项的值可以是文件的绝对路径，也可以是以项目根目录为基准的相对路径。
     resolve: {
-      alias: { // 将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也可以是一个对象，或一个 { find, replacement } 的数组. 当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会被原封不动地使用，因此无法被正常解析。 更高级的自定义解析方法可以通过 插件 实现。
+      alias: {
-        "@root": path.resolve(__dirname),
+        // 将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也可以是一个对象，或一个 { find, replacement } 的数组. 当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会被原封不动地使用，因此无法被正常解析。 更高级的自定义解析方法可以通过 插件 实现。
-        "@": path.resolve(__dirname, "src"),
+        '@root': path.resolve(__dirname),
-        "@components": path.resolve(__dirname, "src/components"),
+        '@': path.resolve(__dirname, 'src'),
-        "@composables": path.resolve(__dirname, "src/composables"),
+        '@components': path.resolve(__dirname, 'src/components'),
-        "@utils": path.resolve(__dirname, "src/utils"),
+        '@composables': path.resolve(__dirname, 'src/composables'),
-        "@images": path.resolve(__dirname, "src/assets/images"),
+        '@utils': path.resolve(__dirname, 'src/utils'),
-        "@css": path.resolve(__dirname, "src/assets/css"),
+        '@images': path.resolve(__dirname, 'src/assets/images'),
-        "@mock": path.resolve(__dirname, "src/assets/mock"),
+        '@css': path.resolve(__dirname, 'src/assets/css'),
-        "common": path.resolve(__dirname, "src/common"),
+        '@mock': path.resolve(__dirname, 'src/assets/mock'),
-        "@api": path.resolve(__dirname, "src/api"),
+        common: path.resolve(__dirname, 'src/common'),
-        "Qs": "qs",
+        '@api': path.resolve(__dirname, 'src/api'),
+        Qs: 'qs',
       },
       dedupe: ['vue'], // 如果你在你的应用程序中有相同依赖的副本（比如 monorepos），使用这个选项来强制 Vite 总是将列出的依赖关系解析到相同的副本（从项目根目录)。
       // conditions: [''], // 在解析包的 情景导出 时允许的附加条件。
@@ -72,7 +73,7 @@ export default ({ mode }) => {
         //   javascriptEnabled: true,
         //   additionalData: `@import "${path.resolve(__dirname, 'src/assets/styles/base.less')}";`
         // }
-      } // 指定传递给 CSS 预处理器的选项。
+      }, // 指定传递给 CSS 预处理器的选项。
     },
     // json: {
     //   namedExports: true, // 是否支持从 .json 文件中进行按名导入。
@@ -84,7 +85,8 @@ export default ({ mode }) => {
     // clearScreen: true, // 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息。命令行模式下请通过 --clearScreen false 设置。
     server: {
       host: '0.0.0.0',
-      port: viteEnv.VITE_PORT, // 本地服务端口
+      // port: viteEnv.VITE_PORT, // 本地服务端口
+      port: 0, // 使用随机可用端口
       // strictPort: true, // 设为true时若端口已被占用则会直接退出, 而不是尝试下一个可用端口
       // https: '',
       // open: false, // 在服务器启动时自动在浏览器中打开应用程序. 当此值为字符串时, 会被当作URL的路径名.
@@ -111,17 +113,23 @@ export default ({ mode }) => {
           chunkFileNames: 'static/js/[name]-[hash].js',
           entryFileNames: 'static/js/[name]-[hash].js',
           assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
-          manualChunks: (id) => {
+          manualChunks: id => {
-            if (!id.includes('node_modules')) return;
+            if (!id.includes('node_modules')) return
-            if (id.includes('@vue-office/docx') || id.includes('@vue-office/excel') || id.includes('@vue-office/pptx')) return 'vue-office';
+            if (
-            if (id.includes('html2canvas') || id.includes('html-to-image')) return 'image-tools';
+              id.includes('@vue-office/docx') ||
+              id.includes('@vue-office/excel') ||
+              id.includes('@vue-office/pptx')
+            )
+              return 'vue-office'
+            if (id.includes('html2canvas') || id.includes('html-to-image')) return 'image-tools'
           },
         },
-        input: { // 多页面应用模式, 打包时配置，运行配置要处理root
+        input: {
+          // 多页面应用模式, 打包时配置，运行配置要处理root
           main: path.resolve(__dirname, 'index.html'),
           // mono1: path.resolve(__dirname, 'src/packages/mono1/index.html'),
           // mono2: path.resolve(__dirname, 'src/packages/mono2/index.html'),
-        }
+        },
       },
     },
     optimizeDeps: {
@@ -129,6 +137,6 @@ export default ({ mode }) => {
       // exclude: [],
       include: ['jquery', 'moment', 'axios', 'pinia', 'vue-router', 'vant'], // 默认情况下，不在 node_modules 中的，链接的包不会被预构建。使用此选项可强制预构建链接的包。
       // keepNames: false, // 打包器有时需要重命名符号以避免冲突。 设置此项为 true 可以在函数和类上保留 name 属性。 若想获取更多详情，请参阅 keepNames
-    }
+    },
-  });
+  })
-};
+}