vue3+ts+vite 配置别名

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

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

vue3+ts+vite 配置别名_第1张图片

//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)=>path.replace('/api','')
      }
    }
  }
})
//tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "paths":{
      "@":["./src"],
      "@/*":["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

你可能感兴趣的:(vue,vue.js,javascript,前端)