vite.config.js配置路径别名@
//从 vite 库中导入 defineConfig 函数。这个函数用于定义 Vite 的配置，它提供了类型推导和其他开发便利性。
import { defineConfig } from 'vite'
// 导入 Vite 的 Vue 插件 @vitejs/plugin-vue。这个插件用于支持 Vue 3 单文件组件 (SFC)，使得 Vite 能够处理 .vue 文件的编译和转换。
import vue from '@vitejs/plugin-vue'
//导入 vite-plugin-vue-setup-extend 插件，这个插件允许你在 Vue 的 <script setup> 语法中使用扩展功能，比如更灵活地定义组件的属性和方法，增强开发体验。
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
// https://vitejs.dev/config/
//使用 defineConfig 函数来定义和导出 Vite 的配置对象。这个对象包含了构建和开发服务器的相关配置。
export default defineConfig({//在配置对象中，定义了一个 plugins 数组。这个数组包含了两个插件的实例：//vue()：这是 Vue 插件的实例，用于处理 Vue 单文件组件。//VueSetupExtend()：这是你导入的插件实例，用于扩展 Vue <script setup> 语法的功能。plugins: [vue(), VueSetupExtend()],
})添加路径别名@的配置
配置反向代理，避免跨域问题
//从 Node.js 的 url 模块中导入 fileURLToPath 和 URL 函数。
//fileURLToPath 用于将文件 URL 转换为文件路径，而 URL 用于创建新的 URL 实例。
import { fileURLToPath, URL } from 'node:url'
//从 Vite 导入 defineConfig 函数。这个函数是一个工具，帮助你定义 Vite 的配置，并提供类型推导的支持（尤其是在 TypeScript 中）。
import { defineConfig } from 'vite'
//导入 Vite 的 Vue 插件 @vitejs/plugin-vue，该插件允许 Vite 处理 Vue 单文件组件（.vue 文件）。
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
//使用 defineConfig 包裹配置对象，并导出为默认模块。这允许 Vite 在解析配置时更好地进行类型检查和智能提示。
export default defineConfig({//配置 Vite 插件。在这里，使用 vue() 函数添加 Vue 插件到 Vite 的插件数组中。这使得 Vite 能够处理 Vue 组件的编译和热重载。plugins: [vue(),],//resolve: 这个属性用于配置模块解析。resolve: {//alias: 该属性允许你创建模块别名，方便在代码中引用。这里将 @ 作为别名指向项目的 src 目录。//fileURLToPath(new URL('./src', import.meta.url)): 这段代码将当前模块的 URL 转换为文件路径，并与 ./src 结合，得到 src 目录的绝对路径。这样你在项目中可以使用 @/your-module 的方式来引用 src/your-module。alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},//server: Vite 的开发服务器配置选项。server: {//proxy: 配置反向代理的选项。proxy: {//'/api': 这是请求的路径前缀。当你在前端发起请求时，如果请求以 /api 开头，代理将拦截并转发请求。//target: 目标服务器的地址，你可以将其替换为实际的 API 服务器地址，例如 http://your-target-server.com。//changeOrigin: 设置为 true，意味着会改变请求头中的 Origin 字段为目标服务器的地址，这对于某些服务器是必要的。//rewrite: 可选的配置，用于重写路径。上面的示例中，所有以 /api 开头的请求会被去掉这个前缀后转发到目标服务器。例如，发送请求到 /api/user 会被重写为 /user。'/api': {target: 'http://your-target-server.com', // 目标服务器地址changeOrigin: true, // 是否改变源rewrite: (path) => path.replace(/^\/api/, ''), // 可选，重写路径},},}
})
在使用 Vite 和 TypeScript 的项目中设置路径别名 @
以下是详细的步骤来配置路径别名 @：
vite.config.ts+tsconfig.json
vite.config.ts
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue';
import path from "path";// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],base: "/2303/",resolve: {alias: {'@': path.resolve(__dirname, './src'),"~": path.resolve(__dirname, "./src/api")},extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json', ".vue"]},server: {port: 2303,open: true},
})tsconfig.json
{"compilerOptions": {"target": "ES2020","useDefineForClassFields": true,"module": "ESNext","lib": ["ES2020", "DOM", "DOM.Iterable"],"skipLibCheck": true,/* Bundler mode */"moduleResolution": "node","allowImportingTsExtensions": true,"resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "preserve",/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true,"types": ["element-plus/global.d.ts"],"baseUrl": ".", // 确保 baseUrl 被设置"paths":{"@/*": ["./src/*"],"~/*":["./src/api/*"]}},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],"references": [{ "path": "./tsconfig.node.json" }]
}
vite.config.js其他配置
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
//引入自动组件导入插件: unplugin-vue-components 使你可以在 Vue 文件中自动导入组件，减少手动导入的繁琐。同时，VantResolver 是一个解析器，用于自动导入 Vant UI 组件。
import { VantResolver } from 'unplugin-vue-components/resolvers';// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),//Components() 插件自动导入组件，并使用 VantResolver 解析器来处理 Vant 组件的导入。Components({resolvers: [VantResolver()],}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},server: {//设置代理proxy: {'/api': { target: 'http://121.89.205.189:3000',//真正的服务器changeOrigin: true, //创建虚拟服务器 rewrite: (path) => path.replace(/^\/api/, '')}}}
})
import { fileURLToPath, URL } from 'node:url'
import path from 'path';
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},base:'./', build: {//指定输出路径outDir: "dist",//生成静态资源的存放路径assetsDir: "assets",//小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项assetsInlineLimit: 4096,//启用/禁用 CSS 代码拆分cssCodeSplit: true,//构建后是否生成 source map 文件sourcemap: false,//自定义底层的 Rollup 打包配置rollupOptions: {input:{//可以配置多个，表示多入口index:path.resolve(__dirname,"index.html"),// project:resolve(__dirname,"project.html")},output:{// chunkFileNames:'static/js/[name]-[hash].js',// entryFileNames:"static/js/[name]-[hash].js",// assetFileNames:"static/[ext]/name-[hash].[ext]"}}}
})
//从 vite 包中导入 defineConfig 函数。
//这个函数用来定义和导出 Vite 的配置对象，使其在类型检查和自动补全中更加友好
import { defineConfig } from 'vite'
//从 Node.js 的 path 模块中导入 resolve 函数，用于处理文件路径，确保在不同操作系统上都能正确解析路径。
import { resolve } from 'path'
//导入 Vite 的 Vue 插件 @vitejs/plugin-vue，这个插件提供了对 Vue 单文件组件（.vue 文件）的支持。
import vue from '@vitejs/plugin-vue'
//导入 vite-plugin-dts 插件，用于生成 TypeScript 的类型定义文件（.d.ts），方便使用 TypeScript 的开发者。
import dts from 'vite-plugin-dts'
// https://vitejs.dev/config/
//使用 defineConfig 函数来定义 Vite 的配置，并将其作为默认导出。
export default defineConfig({//开始定义构建相关的配置。build: {//指定构建为一个库。lib: {//设置库的入口文件为 package/index.ts，resolve 确保这个路径在不同平台下都能正确解析。entry: resolve(__dirname, 'package/index.ts'),//设置库的名称为 VScaleScreen，这个名称在 UMD 和 IIFE 格式中会用到。name: 'VScaleScreen',//指定构建的输出格式，包括：// es：ECMAScript 模块格式。// iife：立即调用的函数表达式格式，适用于浏览器。// umd：通用模块定义格式，支持多种模块加载方式（AMD、CommonJS、全局变量）。// cjs：CommonJS 模块格式，主要用于 Node.js 环境。formats: ['es', 'iife', 'umd', 'cjs'],//指定输出文件的基础名称为 v-scale-screen，实际输出的文件名将根据格式而变化（如 v-scale-screen.es.js）。fileName: 'v-scale-screen'},//配置 Rollup 相关的选项，因为 Vite 是基于 Rollup 构建的。rollupOptions: {//将 vue 声明为外部依赖，不会将其打包进库中，而是让使用者自行提供。external: ['vue'],//定义输出相关的选项。output: {//设置全局变量映射。globals: {//指定在 UMD 和 IIFE 格式中，vue 的全局变量名为 Vue，这通常是在浏览器中使用 Vue 时的全局变量名。vue: 'Vue'}}}},//定义要使用的插件数组：// vue()：启用 Vue 插件，支持 .vue 文件。// dts({ outputDir: 'dist/types' })：启用 vite-plugin-dts 插件，生成类型定义文件并输出到 dist/types 目录。plugins: [vue(), dts({ outputDir: 'dist/types' })]
})