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项目碰到的问题，以上内容基于其他博客的整理，感谢！

有个有意思的插曲，这篇文章断断续续写了一个多月，哈哈。有段时间都忘记这码事了，等我再要往下写时，居然忘了，当初怎么解决的了，于是我翻遍了电脑上所有浏览器的历史记录，终于找回了。所以说好记性不如烂笔头诚不欺