Vue3+Vite+Ts配置路径别名

        虽然网上有一大堆这种文章,但是总会是零零散散的存在某些问题,在此整理一下。

1.配置vite.config.ts

这里要注意的是path报错的话需要npm i @types/node

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

//这个提示报错的记得npm i @types/node
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    //配置别名
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

2.配置tsconfig.json

在compilerOptions里面加入,这个看自己情况,我的不加也能运行。

    "baseUrl": "./src",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },

3.重启客户端

到此就配置完成了,网上的文章很多没有提到第一步path报错那里,这是重点

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个Vue 3使用Vite和TypeScript的示例: 首先,在项目的根目录下创建一个`First.vue`文件。在该文件中,我们可以定义Vue组件的模板、脚本和样式。在这个示例中,我们将简单地在模板中显示一个`<div>`元素,内容为"First"。脚本部分为空,样式部分也为空。具体代码如下所示: ```html <template> <div>First</div> </template> <script lang="ts" setup> </script> <style scoped lang="scss"> </style> ``` 接下来,我们需要在项目中配置别名。在`vite.config.ts`文件中,我们可以使用`@vitejs/plugin-vue`插件以及`path`模块的`resolve`函数来配置别名。具体代码如下所示: ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': resolve(__dirname, 'src') } } }) ``` 最后,在项目中创建一个`Second.vue`文件,代码如下所示。它的结构与`First.vue`相似,只是模板中显示的内容变为"Second"。 ```html <template> <div>Second</div> </template> <script lang="ts" setup> </script> <style scoped lang="scss"> </style> ``` 这样,我们就完成了一个简单的Vue 3使用Vite和TypeScript的示例。在这个示例中,我们创建了两个组件`First.vue`和`Second.vue`,并在Vite配置文件中配置别名以方便引用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [从零开始搭建Vue3+Vite+TS+Router+Pinia脚手架](https://blog.csdn.net/BDawn/article/details/127697454)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [vue3:vue3+vite+ts+pinia](https://blog.csdn.net/snowball_li/article/details/125001728)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值