南山网站 建设seo信科,滁州网,wordpress联系方式插件,杭州 城西 做网站为什么要配置别名
别名的配置#xff0c;主要作用是为了缩短代码中的导入路径。例如有如下的项目目录#xff1a;
project-name| -- src| -- a| --b| --c| --d| --e| -- abc.png| -- index.html| -- main.js如果想在 main.js 文件中使用 abc.png ,则使用的路径是 #xff1…为什么要配置别名
别名的配置主要作用是为了缩短代码中的导入路径。例如有如下的项目目录
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
路径非常的长因为它的目录层级多。问 是否有一种方式可以缩短以上的引入路径呢
答 有这种方式就是路径别名。配置别名的知识储备
因为别名的配置主要是对资源目录的操作在node中path 模块会很有帮助通常会配合使用。
path 模块 node 中专门用来处理文件路径的模块
path.resolve() : path 模块中进行文件路径拼接的方法
__dirname : node 中的一个变量哪个文件中使用了它他就代表了该文件所在的目录绝对路径。先来看看不使用配置别名的常规操作
项目目录
study-vite| -- src -- assets -- aaa.png| -- index.html| -- main.js| -- package.json| -- vite.config.js. # vite 的配置文件,此时无需做任何的配置
main.js 文件内容
// 1、直接使用相对路径引入图片
import aaPic from ./src/assets/aaa.png// 通过js 的方式创建元素
let imgA1 document.createElement(img)
imgA1.src aaPic
imgA1.width400
document.body.appendChild(imgA1)
index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyvite 中引入图片 - 相对路径的方式br!-- 引入 main.js 模块 --script typemodule src./main.js /script/body
/htmlpackage.json 中的脚本 scripts: {dev: vite --mode development,},运行效果
# 运行的命令
$ npm run dev可以正常访问到该图片
再来看看配置别名的效果 本案例中为了区分 正式环境和开发环境使用到了环境配置文件的内容。 如果对环境配置文件不熟悉的小伙伴可以参考下面的文章 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 的主配置文件
配置文件的内容 - 主要看 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)}}})vite.dev.config.js
/*** 开发环境的配置目前来讲还没有配置任何的内容*/import { defineConfig } from viteexport default defineConfig({})vite.prod.config.js
/*** 生产环境的配置目前来讲还没有配置任何的内容*/import { defineConfig } from viteexport default defineConfig({})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]()})main.js 文件内容
// 2、使用别名的方式引入图片
// assets 就是vite.base.config.js 中配置的别名
import aaPic from assets/aaa.pnglet imgA1 document.createElement(img)
imgA1.src aaPic
imgA1.width400
document.body.appendChild(imgA1)
index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyvite 中引入图片 - 路径别名的方式br!-- 引入 main.js 模块 --script typemodule src./main.js /script/body
/htmlpackage.json 中的脚本 scripts: {dev: vite --mode development,},运行效果
# 执行命令
$ 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
