vue-vite配置别名alias并设置智能提示

KnifeZ 3/24/2021, 10:32:34 AM 290

最近在尝试用vite vue3写一套后台框架,经过一番尝试终于把alias别名给搞出来了。

没有用alias之前是这样的

import VSearcher from '../../components/page/v-table/index.vue'

import VSearcher from '../../../components/page/v-table/index.vue'

虽然都能够通过.给一层一层点出来,但还是太蠢了。

使用别名之后是这样的

@c/page/v-searcher/index.vue

再也不用在不同的文件中不停的找上一层了。

具体配置

vite配置

在根目录下的 vite.config.ts文件内添加如下代码

export default defineConfig({
	resolve: {
		alias: [
			{ find: '@', replacement: resolve(__dirname, 'src') },
			{ find: '@c', replacement: resolve(__dirname, 'src/components') },
		],
	},

...
0
1
2
3
4
5
6
7
8

ts配置取消错误提示

在根目录下的tsconfig.json文件内添加如下设置

    "experimentalDecorators": true,
    "paths": {
	"@/*": ["./src/*"],
	"@c/*": ["./src/components/*"]
     }
0
1
2
3
4

这样在实际使用中就不会报错了,虽然这个红色波浪线并不影响实际使用。

安装vscode插件实现智能提示

在vs拓展(Ctrl Shift X)中搜索**path alias **,安装后打开配置添加如下配置


  "pathAlias.aliasMap": {
    "@": "${cwd}/src",
    "@c":"${cwd}/src/components"
  },
0
1
2
3
4

${cwd}代表项目根目录。

这样就可以实现别名的智能提示了。

如果觉得文章帮助了您,可以请我喝杯咖啡

#Tags

软件工具

上一篇: SQL查询小知识

发表评论

邮箱
昵称

热门文章

本站已稳定运行了1天 共计人访问
Powered by .NET 5 on ubuntu