• Vite - 配置 - 文件路径别名的配置

    为什么要配置别名

    别名的配置，主要作用是为了缩短代码中的导入路径。

例如有如下的项目目录：
project-name
	| -- src
		| -- a
			| --b
			 	| --c
			 		| --d
			 			| --e
			 				| -- abc.png
	| -- index.html
	| -- main.js

如果想在 main.js 文件中使用 abc.png ,则使用的路径是 ：
import abcPng from './src/a/b/c/d/e/abc.png'
路径非常的长，因为它的目录层级多。

问 ： 是否有一种方式可以缩短以上的引入路径呢？
答 ： 有！这种方式就是路径别名。

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    配置别名的知识储备

    因为别名的配置主要是对资源目录的操作，在node中，path 模块会很有帮助，通常会配合使用。
path 模块 ： node 中专门用来处理文件路径的模块；
path.resolve() : path 模块中进行文件路径拼接的方法；
__dirname : node 中的一个变量，哪个文件中使用了它，他就代表了该文件所在的目录（绝对路径）。

    • 1
    • 2
    • 3
    • 4

    先来看看不使用配置别名的常规操作

    项目目录

    study-vite
	| -- src
		｜ -- assets
			｜ -- aaa.png
	| -- index.html
	| -- main.js
	| -- package.json
	| -- vite.config.js. # vite 的配置文件,此时无需做任何的配置


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    main.js 文件内容

    // 1、直接使用相对路径引入图片
import aaPic from './src/assets/aaa.png'

// 通过js 的方式创建元素
let imgA1 = document.createElement("img")
imgA1.src = aaPic
imgA1.width=400
document.body.appendChild(imgA1)


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    index.html

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    vite 中引入图片 - 相对路径的方式
    <br>
    
    <script type="module" src="./main.js" >script>
    
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    package.json 中的脚本

      "scripts": {
    "dev": "vite --mode development",
  },

    • 1
    • 2
    • 3

    运行效果

    # 运行的命令
$ npm run dev

    • 1
    • 2

    可以正常访问到该图片
    在这里插入图片描述

    再来看看配置别名的效果

    本案例中，为了区分 正式环境和开发环境，使用到了环境配置文件的内容。
    如果对环境配置文件不熟悉的小伙伴，可以参考下面的文章
    Vite - 配置 - 不同的环境执行不同的配置文件
    文章地址 ： https://blog.csdn.net/qq_39505245/article/details/134332060

    项目目录

    study-vite
	| -- environment # 环境配置文件目录
		| -- vite.base.config.js # 基础公用配置
		| -- vite.dev.config.js # 开发环境配置
		| -- vite.prod.config.js # 生产环境配置
	| -- src
		｜ -- assets
			｜ -- aaa.png
	| -- index.html
	| -- main.js
	| -- package.json
	| -- vite.config.js. # vite 的主配置文件


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    配置文件的内容 - 主要看 vite.base.config.js

    vite.base.config.js （核心、关键）

    /**
 * 基础环境配置，公用的配置
 */

import { defineConfig } from "vite"

// 引入path模块
import path from "path"

// 打印一下__dirname（此处是为了展示变量的值，助于下面的理解）
console.log('vite.base.config.js - __dirname : ',__dirname)
// 打印一下 path.resolve(__dirname,"../src/assets") （此处是为了展示变量的值，助于下面的理解）
console.log('vite.base.config.js - path.resolve() : ',path.resolve(__dirname,"../src/assets"))

export default defineConfig({
    resolve:{
        alias:{
            /**
             * 解释 ： 
             * __dirname : 当前文件所在的目录的绝对路径
             * "../src/assets" : 表示相对于 __dirname ,要进行拼接的目录
             * path.resolve() : 将上面两个目录拼接起来
             * 
             * "@assets" : 给拼接的目录起一个别名，在项目中可以通过别名的方式进行资源的引入
             */
            "@assets" : path.resolve(__dirname,"../src/assets")
        }
    }
   
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    vite.dev.config.js

    /**
 * 开发环境的配置，目前来讲还没有配置任何的内容
 */

import { defineConfig } from "vite"

export default defineConfig({

})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    vite.prod.config.js

    /**
 * 生产环境的配置，目前来讲还没有配置任何的内容
 */

import { defineConfig } from "vite"

export default defineConfig({
   
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    vite.config.js

    非常的简单，主要就是根据启动时的命令，使用不同的配置参数；
    在本案例中，使用的启动命令是 npm run dev，走的是开发环境的配置
    因此 ，项目会加载【vite.base.config.js】【vite.dev.config.js】两个配置文件

    
import { defineConfig } from "vite"

// 引入三个环境配置文件
import ViteBaseConfig from "./environment/vite.base.config"
import ViteProdConfig from "./environment/vite.prod.config"
import ViteDevConfig from "./environment/vite.dev.config"

// 策略模式做一个动态的配置
const envResolver = {
    "build":()=>{
        console.log("生产环境")
        // 解构的语法
        return ({...ViteBaseConfig,...ViteProdConfig})
    },
    "serve":()=>{
        console.log("开发环境")
        // 另一种写法
        return Object.assign({},ViteBaseConfig,ViteDevConfig)
    }
}

// 根据 参数 command 的值，使用不同的环境配置文件
export default defineConfig(({command,mode})=>{
   
    // 根据不同的环境使用不同的配置文件,注意这个地方的写法，非常的奇特
    return envResolver[command]()

})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    main.js 文件内容

    // 2、使用别名的方式引入图片
// @assets 就是vite.base.config.js 中配置的别名
import aaPic from '@assets/aaa.png'

let imgA1 = document.createElement("img")
imgA1.src = aaPic
imgA1.width=400
document.body.appendChild(imgA1)


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    index.html

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    vite 中引入图片 - 路径别名的方式
    <br>
    
    <script type="module" src="./main.js" >script>
    
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    package.json 中的脚本

      "scripts": {
    "dev": "vite --mode development",
  },

    • 1
    • 2
    • 3

    运行效果

    # 执行命令
$ npm run dev

因为我们在配置文件中有打印，所以在项目启动-加载配置文件的时候会有如下输出
 (就是我们验证 path 模块的相关内容)
vite.base.config.js - __dirname :  /xxx/xxx/study-vite/environment
vite.base.config.js - path.resolve() :  /xxx/xxx/study-vite/src/assets

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述

  • 相关阅读:
    MVCC和BufferPool缓存机制
    linux权限
    金仓数据库KingbaseES客户端编程开发框架-MyBatis（4. MyBatis注意点）
    前端数据可视化之【title、legend、tooltip、toolbox 】配置项
    Alibaba针对“金九银十”推出的《Java岗位面试清单》，全是考点
    金融信贷行业如何准确——大数据精准定位获客渠道
    看涨期权计算例题（期权案例计算）
    TikTok shop美国小店适合哪些人做？附常见运营问题解答
    算法--数据结构
    2023.11.14 关于 Spring Boot 创建和使用
  • 原文地址：https://blog.csdn.net/qq_39505245/article/details/134484672