hookehuyr

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

避免端口冲突,提升开发体验。原先的 VITE_PORT 环境变量配置被注释,改为使用端口 0 让系统自动分配。
......@@ -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 } 的数组. 当使用文件系统路径的别名时,请始终使用绝对路径。相对路径的别名值会被原封不动地使用,因此无法被正常解析。 更高级的自定义解析方法可以通过 插件 实现。
"@root": path.resolve(__dirname),
"@": path.resolve(__dirname, "src"),
"@components": path.resolve(__dirname, "src/components"),
"@composables": path.resolve(__dirname, "src/composables"),
"@utils": path.resolve(__dirname, "src/utils"),
"@images": path.resolve(__dirname, "src/assets/images"),
"@css": path.resolve(__dirname, "src/assets/css"),
"@mock": path.resolve(__dirname, "src/assets/mock"),
"common": path.resolve(__dirname, "src/common"),
"@api": path.resolve(__dirname, "src/api"),
"Qs": "qs",
alias: {
// 将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也可以是一个对象,或一个 { find, replacement } 的数组. 当使用文件系统路径的别名时,请始终使用绝对路径。相对路径的别名值会被原封不动地使用,因此无法被正常解析。 更高级的自定义解析方法可以通过 插件 实现。
'@root': path.resolve(__dirname),
'@': path.resolve(__dirname, 'src'),
'@components': path.resolve(__dirname, 'src/components'),
'@composables': path.resolve(__dirname, 'src/composables'),
'@utils': path.resolve(__dirname, 'src/utils'),
'@images': path.resolve(__dirname, 'src/assets/images'),
'@css': path.resolve(__dirname, 'src/assets/css'),
'@mock': path.resolve(__dirname, 'src/assets/mock'),
common: path.resolve(__dirname, 'src/common'),
'@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) => {
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 (id.includes('html2canvas') || id.includes('html-to-image')) return 'image-tools';
manualChunks: id => {
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 (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
}
});
};
},
})
}
......