vite.config.js配置路径别名@

原创已于 2024-10-23 00:10:57 修改 · 1k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2024-10-23 00:09:52 首次发布

//从 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' })]
})