vue3+ts+vite 配置别名

下载插件npm install @types/node -D

vite + ts 配置别名:path模块是node.js内置的功能,但是node.js本身并不支持typescript,所以直接在typescript项目里使用是不行的
解决方法:安装@types/node

在这里插入图片描述

//vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import{resolve} from "path"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias:[{
      find:'@',
      replacement:resolve(__dirname,'src')
    }]
  },
  base: './', // 打包路径
  server:{
    port: 3008, // 服务端口号
    open: true, // 服务启动时是否自动打开浏览器
    cors: true, // 允许跨域
    proxy:{
      '/api':{
        target:"http://192.168.25.133:8080",
        changeOrigin:true,
        rewrite:(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、付费专栏及课程。

余额充值