VUE+ts项目配置--alias别名配置
需求
想在VUE项目中配置‘@’符号的别名,以便在VUE页面或组件中import导入时用,如下图
应用alias别名的好处
在VUE项目中import导入文件时,可以写相对路径,比如
这样写纵然可以,但是上图中标记1、2、4的都是公共文件,若以后移动项目位置,那么就得去所有引用的页面改引用路径,太麻烦,一旦漏掉修改就会报错。所以这个时候使用alias别名是好的选择。
添加alias别名设置
在vue+ts项目中添加别名的方式有两种:
一种是在tsconfig.json文件中(如果不是ts的vue那么是jsconfig.json)添加。
一种是在vue.config.ts(VUE CLI构建的项目)或vite.config.ts(VITE构建的项目)文件中添加。
(1)在tsconfig.json中添加别名
找到项目中的tsconfig.json文件,一般在项目的根目录下(没有就自己创建一个)
在该文件的paths属性下配置别名
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
这样就创建了一个@的别名,注意paths属性要结合baseUrl使用,在该项目的其他文件中使用import导入,@就可以被使用了,他代表 项目根目录/src/ 路径。
也可以创建多个别名
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"jq":["node_modules/jquery/dist/jquery.min.js"]
}
}
}
(2)在vue.config.ts(或.js)中添加别名
需要说明的是,vue2中通过VUE CLI脚手架 创建项目,项目的配置文件是 vue.config.ts(或vue.config.js)。而vue3推荐使用Vite进行项目构建,其生成的配置文件是vite.config.ts(或vite.config.js)。他们俩在本质上是一样的,不同的是其服务的脚手架不同而已。在vue中可以把它们当做是webpack的配置。
vue.config.ts的配置:
const path = require('path')
module.exports = {
/***第一种配置方法***/
// chainWebpack: (config) => {
// config.resolve.alias
// .set('@', path.join(__dirname, './src'))
// .set('@api', path.join(__dirname, './src/api'))
// },
/***第二种配置方法***/
configureWebpack: {
resolve: {
alias: {
'@': path.join(__dirname, './src'),
'@api': path.join(__dirname, './src/api')
}
}
}
}
vite.config.ts中的配置:
import { defineConfig } from "vite";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
// 配置别名
alias: [
{ find: "@", replacement: path.resolve(__dirname, "src") },
{ find: "@api", replacement: path.resolve(__dirname, "src/api") },
],
},
base: "./",
});
注意:在vite.config.ts中配置完别名后,还得再tsconfig.json中配置一遍,酱:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@api/*":["node_modules/jquery/dist/jquery.min.js"]
}
}
}
至于为什么vite中需要再在tsconfig.json中配置一遍,我想可能是因为vue CLI已经自动把webpack打包时的别名配置关联tsconfig中了,而vite没有吧(具体不太清楚了,有知道的欢迎指点)。
使用alias别名设置
能添加使用就水到渠成了:
别走!还有!
关于Monorepo模式下Vetur插件有时使用别名导致解析路径出错的问题
先发一个链接https://vuejs.github.io/vetur/guide/setup.html#advanced
这个是Vetur插件的官方处理办法。
首先解释一下是什么Monorepo,翻译为单一的仓储,可以理解成一个仓储中有多个项目。放到VSCode IDE中就是一个工作区中有多个项目。如:
上图中project目录下的每一个目录都是一个单独的项目,启动时都需要开一个线程 npm run启动项目。这就是一个monorepo项目。
Vetur插件vue2是一个语法插件。过去我们使用的大多都是一个工作区对应一个项目,所以该插件一直很安分。但是这个monorepo让他原形毕露了他没我们想象的简单。
正题,monorepo模式下,Vetur插件默认当前工作区的第一个文件夹(排除掉.vscode文件夹,这个是我测试是加上去的),比如上图中operatorManagement这个项目,其中tsconfig.json配置的baseUrl中是相对于project/app文件夹的,所以Vetur就会报错找不到。
解决办法有三种:
1.简单暴力的是将operatorManagement项目放到 该工作区第一位(网上搜的说:鼠标拖拽就行,试了好几次不行,拖不动)
2.将operatorManagement项目单独存为一个工作区
3.在工作区根目录下新建并配置vetur.config.js文件
具体配置说明就是上面发的那个链接。
好了,这是我最近接触monorepo项目碰到的问题,以上内容基于其他博客的整理,感谢!
有个有意思的插曲,这篇文章断断续续写了一个多月,哈哈。有段时间都忘记这码事了,等我再要往下写时,居然忘了,当初怎么解决的了,于是我翻遍了电脑上所有浏览器的历史记录,终于找回了。所以说好记性不如烂笔头诚不欺